/* ==========================================================================
   Stream E2EE Custom Luxury Minimalist Light Theme
   Cloud-Blue Gradient Background + Pure White Modal Card
   ========================================================================== */

/* 1. Global Typography: Plus Jakarta Sans */
body, input, button, textarea, select {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* 2. Precision Geometric Centering & Cloud-Blue Background (Solutions Hero Gradient) */
.mx_AuthPage {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  padding: 32px 16px 24px !important;
  box-sizing: border-box !important;
  position: relative !important;
  background: linear-gradient(175deg, #1A9EE0 0%, #2BA5E2 25%, #46B4E7 52%, #6CC5EF 78%, #8BD3F4 100%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 3. Eliminate Element Web's double card / shifted blur ghosting */
.mx_AuthPage_modalBlur {
  display: none !important;
}

/* 4. Pure White Auth Modal Card */
.mx_AuthPage_modal {
  margin: auto 0 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 460px !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px -12px rgba(10, 45, 90, 0.22), 0 8px 24px -4px rgba(0, 0, 0, 0.08) !important;
  overflow: visible !important; /* CRITICAL: Prevent dropdown clipping */
  position: relative !important;
  z-index: 50 !important;
  flex-shrink: 0 !important;
}

/* Ensure all internal wrappers are transparent so white modal is uniform */
.mx_AuthPage_modalContent,
.mx_Welcome,
.mx_DefaultWelcome,
.mx_AuthBody,
.mx_AuthPage [class*="_glass"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.mx_AuthPage_modalContent {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Flatten AuthHeader */
.mx_AuthHeader {
  display: contents !important;
}

/* 5. Auth Header Logo & Welcome Logo Container (Order: 1 -> Top) */
.mx_DefaultWelcome_logo,
.mx_AuthHeaderLogo {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: none !important;
  padding: 36px 24px 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.mx_DefaultWelcome_logo img,
.mx_AuthHeaderLogo img {
  width: 100% !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Hide duplicate "Welcome to Stream E2EE" text heading */
.mx_DefaultWelcome h1 {
  display: none !important;
}

/* 6. Auth Body Container (Order: 2 -> Middle) */
.mx_AuthBody {
  order: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 32px 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}

.mx_AuthBody > * {
  width: 100% !important;
  max-width: 380px !important;
}

/* Headings inside auth modal */
.mx_AuthBody h1 {
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 4px 0 12px !important;
}

/* Homeserver Picker text */
.mx_ServerPicker {
  text-align: center !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
  color: #64748B !important;
}

.mx_ServerPicker h2 {
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 400 !important;
  margin-bottom: 2px !important;
}

.mx_ServerPicker_server {
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* Form Layout */
.mx_AuthBody form {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.mx_Login_type_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.mx_Login_type_label {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Select Dropdown (Username / Email / Phone on Welcome/Auth) */
.mx_AuthBody .mx_Field_select select,
.mx_AuthBody .mx_Field select,
.mx_AuthPage .mx_Field_select select,
.mx_AuthPage .mx_Field select {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* Inputs on White Welcome/Auth Card */
.mx_AuthBody .mx_Field,
.mx_AuthPage .mx_Field {
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.mx_AuthBody .mx_Field input,
.mx_AuthPage .mx_Field input {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.mx_AuthBody .mx_Field input:focus,
.mx_AuthPage .mx_Field input:focus {
  background: #FFFFFF !important;
  border-color: #1A9EE0 !important;
  box-shadow: 0 0 0 3px rgba(26, 158, 224, 0.2) !important;
  outline: none !important;
}

/* Floating Field Label on Welcome/Auth */
.mx_AuthBody .mx_Field label,
.mx_AuthBody .mx_Field_label,
.mx_AuthPage .mx_Field label,
.mx_AuthPage .mx_Field_label {
  background: #FFFFFF !important;
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 4px !important;
}

.mx_AuthBody .mx_Field:focus-within label,
.mx_AuthPage .mx_Field:focus-within label {
  color: #1A9EE0 !important;
}

/* Primary Submit Buttons */
.mx_Login_submit,
input[type="submit"].mx_Login_submit,
.mx_AccessibleButton.mx_Login_submit,
.mx_AuthBody .mx_AccessibleButton_kind_primary {
  width: 100% !important;
  border-radius: 9999px !important;
  padding: 13px 24px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.mx_Login_submit:hover,
input[type="submit"].mx_Login_submit:hover,
.mx_AccessibleButton.mx_Login_submit:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

/* Welcome page buttons container */
.mx_DefaultWelcome_buttons, 
.mx_AuthBody_button-container {
  width: 100% !important;
  max-width: 380px !important;
  margin: 12px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-bottom: none !important; /* Remove line above language */
}

/* Welcome Primary Button: Sign in */
.mx_DefaultWelcome_buttons a:first-child,
.mx_DefaultWelcome_buttons ._button_1nw83_8:first-child,
.mx_DefaultWelcome_buttons a[href*="login"] {
  width: 100% !important;
  border-radius: 9999px !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 24px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mx_DefaultWelcome_buttons a:first-child:hover,
.mx_DefaultWelcome_buttons ._button_1nw83_8:first-child:hover,
.mx_DefaultWelcome_buttons a[href*="login"]:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

/* Welcome Secondary Button: Create account */
.mx_DefaultWelcome_buttons a:last-child,
.mx_DefaultWelcome_buttons ._button_1nw83_8:last-child,
.mx_DefaultWelcome_buttons a[href*="register"] {
  width: 100% !important;
  border-radius: 9999px !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 24px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mx_DefaultWelcome_buttons a:last-child:hover,
.mx_DefaultWelcome_buttons ._button_1nw83_8:last-child:hover,
.mx_DefaultWelcome_buttons a[href*="register"]:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  transform: translateY(-1px) !important;
}

/* Links inside auth cards */
.mx_AuthBody_changeFlow,
.mx_Register_footerActions {
  text-align: center !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  color: #475569 !important;
}

.mx_AuthBody_changeFlow a,
.mx_AuthBody_changeFlow .mx_AccessibleButton,
.mx_Register_footerActions a,
.mx_Register_footerActions .mx_AccessibleButton,
.mx_AccessibleButton_kind_link_inline {
  color: #0F172A !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.mx_Login_forgot,
.mx_Login_forgotPassword {
  color: #475569 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.mx_Login_forgot:hover,
.mx_Login_forgotPassword:hover {
  color: #0F172A !important;
  text-decoration: underline !important;
}

/* 7. Language Selector Dropdown (Order: 3 -> Bottom of Modal) */
.mx_LanguageDropdown,
.mx_AuthBody_language {
  order: 3 !important;
  margin-top: 12px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 100 !important;
}

.mx_LanguageDropdown::before,
.mx_AuthBody_language::before {
  display: none !important;
}

/* Language Trigger Pill Button */
.mx_LanguageDropdown .mx_Dropdown_input,
.mx_AuthBody_language .mx_Dropdown_input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 130px !important;
  max-width: 180px !important;
  padding: 6px 14px !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  color: #475569 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.35, 1) !important;
  position: relative !important;
}

.mx_LanguageDropdown .mx_Dropdown_input:hover,
.mx_AuthBody_language .mx_Dropdown_input:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #1E293B !important;
}

.mx_LanguageDropdown .mx_Dropdown_input[aria-expanded="true"],
.mx_AuthBody_language .mx_Dropdown_input[aria-expanded="true"] {
  border-color: #1A9EE0 !important;
  box-shadow: 0 0 0 3px rgba(26, 158, 224, 0.15) !important;
  background: #FFFFFF !important;
}

.mx_LanguageDropdown .mx_Dropdown_input .mx_Dropdown_option {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.mx_LanguageDropdown .mx_Dropdown_input input.mx_Dropdown_option {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #0F172A !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 4px !important;
  margin: 0 !important;
  width: 100% !important;
}

.mx_LanguageDropdown .mx_Dropdown_arrow {
  color: #64748B !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.mx_LanguageDropdown .mx_Dropdown_input[aria-expanded="true"] .mx_Dropdown_arrow {
  transform: rotate(180deg) !important;
  color: #1A9EE0 !important;
}

/* Global Dropdown and Contextual Menu Popups */
.mx_Dropdown,
.mx_ContextualMenu_wrapper,
.mx_ContextualMenu {
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Language Dropdown Menu Container (Strict overflow-y: auto for scrolling) */
.mx_LanguageDropdown .mx_Dropdown_menu,
.mx_AuthBody_language .mx_Dropdown_menu,
ul#mx_LanguageDropdown_listbox {
  z-index: 99999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 240px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
  padding: 6px !important;
  list-style: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 220px !important;
}

/* Dropdown Menu Scrollbar */
.mx_Dropdown_menu::-webkit-scrollbar {
  width: 5px !important;
}
.mx_Dropdown_menu::-webkit-scrollbar-track {
  background: transparent !important;
}
.mx_Dropdown_menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 10px !important;
}

/* Dropdown Option Items on Auth Language Dropdown */
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
.mx_AuthBody_language .mx_Dropdown_menu .mx_Dropdown_option,
ul#mx_LanguageDropdown_listbox .mx_Dropdown_option {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  text-transform: capitalize !important;
}

.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
.mx_AuthBody_language .mx_Dropdown_menu .mx_Dropdown_option:hover,
.mx_AuthBody_language .mx_Dropdown_menu .mx_Dropdown_option_highlight,
ul#mx_LanguageDropdown_listbox .mx_Dropdown_option:hover,
ul#mx_LanguageDropdown_listbox .mx_Dropdown_option_highlight {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* In-App Dropdown Menus in Dark Mode */
.cpd-theme-dark .mx_Dropdown_menu,
.theme-dark .mx_Dropdown_menu,
[data-mx-theme="Dark"] .mx_Dropdown_menu {
  background: #182234 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.5) !important;
}

.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option,
.theme-dark .mx_Dropdown_menu .mx_Dropdown_option {
  color: #E2E8F0 !important;
}

.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option:hover,
.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option_highlight,
.theme-dark .mx_Dropdown_menu .mx_Dropdown_option:hover,
.theme-dark .mx_Dropdown_menu .mx_Dropdown_option_highlight {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* 8. Luxury Minimalist Footer: YPYM Innovation Observatory */
.mx_AuthFooter {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 24px 16px 8px !important;
  background: transparent !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 40 !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Link: YPYM Innovation Observatory */
.mx_AuthFooter a,
.mx_stream_footer_link {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: opacity 0.2s ease !important;
  cursor: pointer !important;
}

/* "YPYM" with 30% transparency (opacity 0.70) so it is subtle but legible */
.mx_stream_footer_ypym {
  opacity: 0.70 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: opacity 0.2s ease !important;
}

/* "Innovation Observatory" crisp and clear */
.mx_stream_footer_label {
  opacity: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}

.mx_AuthFooter a:hover,
.mx_stream_footer_link:hover {
  text-decoration: none !important;
}

.mx_stream_footer_link:hover .mx_stream_footer_ypym {
  opacity: 0.90 !important;
}

.mx_stream_footer_link:hover .mx_stream_footer_label {
  text-decoration: underline !important;
}

/* Hide any accidental link to matrix.org, separator, or extra footer text */
.mx_AuthFooter a[href*="matrix.org"],
.mx_AuthFooter_text,
.mx_footer_sep,
.mx_footer_text {
  display: none !important;
}

/* ==========================================================================
   9. Complete Security & Verification Dialog (Confirm Digital Identity)
   ========================================================================== */

/* Override Element Web's hardcoded 600px width */
.mx_SetupEncryptionBody {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Neutralize Compound Glass container strictly inside auth modal */
.mx_AuthPage ._glass_sepwu_8,
.mx_AuthPage .mx_Dialog_border,
.mx_AuthPage .mx_Dialog,
.mx_AuthPage [class*="_glass"],
.mx_AuthPage_modal ._glass_sepwu_8,
.mx_AuthPage_modal .mx_Dialog_border,
.mx_AuthPage_modal .mx_Dialog,
.mx_AuthPage_modal [class*="_glass"],
.mx_AuthPage_modal .mx_CompleteSecurityBody,
.mx_AuthPage_modal .mx_EncryptionCard,
.mx_AuthPage_modal .mx_SetupEncryptionBody {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Make CompleteSecurityBody seamlessly blend into the white modal */
.mx_CompleteSecurityBody {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 36px 32px 36px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Close / Skip button positioned nicely at top-right */
.mx_CompleteSecurity_header {
  position: static !important;
  width: 100% !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.mx_CompleteSecurity_skip {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  z-index: 20 !important;
}

.mx_CompleteSecurity_skip:hover {
  background: #E2E8F0 !important;
  transform: scale(1.05) !important;
}

.mx_CompleteSecurity_skip svg {
  width: 16px !important;
  height: 16px !important;
  color: #64748B !important;
}

/* CompleteSecurity Body & Card Layout */
.mx_CompleteSecurity_body {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.mx_EncryptionCard,
.mx_EncryptionCard.mx_EncryptionCard_noBorder {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

.mx_EncryptionCard_header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.mx_EncryptionCard_icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 4px !important;
  color: #0F172A !important;
}

.mx_EncryptionCard_icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: #0F172A !important;
}

.mx_EncryptionCard_header > h2,
.mx_CompleteSecurityBody h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
  text-align: center !important;
  letter-spacing: -0.3px !important;
}

.mx_EncryptionCard_emphasisedContent,
.mx_EncryptionCard_header > span,
.mx_CompleteSecurityBody span {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  color: #64748B !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

.mx_EncryptionCard_emphasisedContent a,
.mx_CompleteSecurityBody a {
  color: #0284C7 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.mx_EncryptionCard_emphasisedContent a:hover,
.mx_CompleteSecurityBody a:hover {
  text-decoration: underline !important;
}

/* Button stack inside verification card */
.mx_EncryptionCard_buttons {
  width: 100% !important;
  max-width: 380px !important;
  margin: 12px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Uniform button base styles */
.mx_EncryptionCard_buttons button,
.mx_EncryptionCard_buttons ._button_1nw83_8,
.mx_EncryptionCard_buttons .mx_AccessibleButton {
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 9999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  padding: 0 20px !important;
  text-decoration: none !important;
}

/* Primary buttons: "Use another device", "Use recovery key" */
.mx_EncryptionCard_buttons button[data-kind="primary"],
.mx_EncryptionCard_buttons [class*="_kind-primary"],
.mx_EncryptionCard_buttons .mx_AccessibleButton_kind_primary {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
}

.mx_EncryptionCard_buttons button[data-kind="primary"]:hover,
.mx_EncryptionCard_buttons [class*="_kind-primary"]:hover,
.mx_EncryptionCard_buttons .mx_AccessibleButton_kind_primary:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

.mx_EncryptionCard_buttons button[data-kind="primary"] svg,
.mx_EncryptionCard_buttons [class*="_kind-primary"] svg {
  color: #FFFFFF !important;
  margin-right: 6px !important;
}

/* Secondary button: "Can't confirm?" */
.mx_EncryptionCard_buttons button[data-kind="secondary"],
.mx_EncryptionCard_buttons [class*="_kind-secondary"],
.mx_EncryptionCard_buttons .mx_AccessibleButton_kind_secondary {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

.mx_EncryptionCard_buttons button[data-kind="secondary"]:hover,
.mx_EncryptionCard_buttons [class*="_kind-secondary"]:hover,
.mx_EncryptionCard_buttons .mx_AccessibleButton_kind_secondary:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  transform: translateY(-1px) !important;
}

/* Tertiary button: "Remove this device" / "Sign out" */
.mx_EncryptionCard_buttons button[data-kind="tertiary"],
.mx_EncryptionCard_buttons [class*="_kind-tertiary"],
.mx_EncryptionCard_buttons .mx_AccessibleButton_kind_tertiary {
  background: transparent !important;
  color: #64748B !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 32px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.mx_EncryptionCard_buttons button[data-kind="tertiary"]:hover,
.mx_EncryptionCard_buttons [class*="_kind-tertiary"]:hover,
.mx_EncryptionCard_buttons .mx_AccessibleButton_kind_tertiary:hover {
  background: transparent !important;
  color: #DC2626 !important;
  text-decoration: underline !important;
  transform: none !important;
}

/* Verification Success / Done Action Row */
.mx_CompleteSecurity_actionRow {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 20px !important;
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton {
  width: 100% !important;
  max-width: 380px !important;
  border-radius: 9999px !important;
  height: 44px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Strict Guarantee: Auth Modal Card is strictly a single unified luxury white card with zero nested framing */
.mx_AuthPage_modal .mx_Dialog_border,
.mx_AuthPage_modal .mx_Dialog,
.mx_AuthPage_modal [class*="_glass"],
.mx_AuthPage_modal ._glass_sepwu_8,
.mx_AuthPage_modal .mx_CompleteSecurityBody,
.mx_AuthPage_modal .mx_EncryptionCard,
.mx_AuthPage_modal .mx_SetupEncryptionBody {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   10. Global Dialog & Popup Remediation (Luxury Minimalist Light System)
   Covers ALL Element Web Modals: Verification, Settings, Rooms, Alerts, Prompts
   ========================================================================== */

/* Dark frosted backdrop for all modal dialogs */
.mx_Dialog_wrapper:not(.mx_SpotlightDialog_wrapper) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4000 !important;
}

.mx_Dialog_background {
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 4001 !important;
}

/* Base Dialog Border & Glass Wrapper - Light Theme Card Frame */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_wrapper:not(.mx_AuthPage):not(.mx_SpotlightDialog_wrapper) .mx_Dialog_border,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_wrapper:not(.mx_AuthPage):not(.mx_SpotlightDialog_wrapper) [class*="_glass"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *):not(.mx_SpotlightDialog_wrapper *),
.cpd-theme-light .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *):not(.mx_SpotlightDialog_wrapper *) {
  width: 100% !important;
  max-width: fit-content !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.22), 0 8px 24px -4px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  margin: 16px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 4002 !important;
  outline: none !important;
  position: relative !important;
}

/* Base Dialog Window Inner Container - Light Theme */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_wrapper:not(.mx_AuthPage):not(.mx_SpotlightDialog_wrapper) .mx_Dialog,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *):not(.mx_SpotlightDialog_wrapper *),
.cpd-theme-light .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *):not(.mx_SpotlightDialog_wrapper *) {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 28px 28px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #0F172A !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  pointer-events: auto !important;
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(88vh - 32px) !important;
}

/* Base Dialog Border & Glass Wrapper - Dark Theme Luxury Card Frame */
.cpd-theme-dark .mx_Dialog_wrapper:not(.mx_AuthPage):not(.mx_SpotlightDialog_wrapper) .mx_Dialog_border,
.cpd-theme-dark .mx_Dialog_wrapper:not(.mx_AuthPage):not(.mx_SpotlightDialog_wrapper) [class*="_glass"],
.cpd-theme-dark .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
.cpd-theme-dark-hc .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
.theme-dark .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
[data-mx-theme*="dark" i] .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
[data-theme="dark"] .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
body[class*="dark"] .mx_Dialog_border:not(.mx_AuthPage *):not(.mx_AuthPage_modal *) {
  background: #151924 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 8px 24px -4px rgba(0, 0, 0, 0.4) !important;
}

/* Base Dialog Window Inner Container - Dark Theme */
.cpd-theme-dark .mx_Dialog_wrapper:not(.mx_AuthPage):not(.mx_SpotlightDialog_wrapper) .mx_Dialog,
.cpd-theme-dark .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
.cpd-theme-dark-hc .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
.theme-dark .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
[data-mx-theme*="dark" i] .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
[data-theme="dark"] .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *),
body[class*="dark"] .mx_Dialog:not(.mx_AuthPage *):not(.mx_AuthPage_modal *) {
  background: #151924 !important;
  color: #F8FAFC !important;
}

/* Invite Dialog Full Dark Mode Palette */
.cpd-theme-dark .mx_InviteDialog,
.cpd-theme-dark-hc .mx_InviteDialog,
.theme-dark .mx_InviteDialog,
[data-mx-theme*="dark" i] .mx_InviteDialog {
  color: #F8FAFC !important;
}

.cpd-theme-dark .mx_InviteDialog_addressBar,
.cpd-theme-dark-hc .mx_InviteDialog_addressBar,
.theme-dark .mx_InviteDialog_addressBar {
  background: #1E293B !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 4px 8px !important;
}

.cpd-theme-dark .mx_InviteDialog_addressBar input,
.cpd-theme-dark-hc .mx_InviteDialog_addressBar input,
.theme-dark .mx_InviteDialog_addressBar input {
  color: #FFFFFF !important;
  background: transparent !important;
}

.cpd-theme-dark .mx_InviteDialog_section,
.cpd-theme-dark .mx_InviteDialog_sectionHeader,
.cpd-theme-dark .mx_InviteDialog h3,
.cpd-theme-dark .mx_InviteDialog h4,
.theme-dark .mx_InviteDialog_section,
.theme-dark .mx_InviteDialog h3 {
  color: #94A3B8 !important;
}

.cpd-theme-dark .mx_InviteDialog_tile,
.theme-dark .mx_InviteDialog_tile {
  color: #F8FAFC !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: background 0.15s ease !important;
}

.cpd-theme-dark .mx_InviteDialog_tile:hover,
.theme-dark .mx_InviteDialog_tile:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.cpd-theme-dark .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name,
.theme-dark .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_name {
  color: #FFFFFF !important;
}

.cpd-theme-dark .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId,
.theme-dark .mx_InviteDialog_tile .mx_InviteDialog_tile_nameStack .mx_InviteDialog_tile_nameStack_userId {
  color: #94A3B8 !important;
}

.cpd-theme-dark .mx_InviteDialog_userSections,
.theme-dark .mx_InviteDialog_userSections {
  background: transparent !important;
}

/* Dark Theme Dialog Typography & Controls */
.cpd-theme-dark .mx_Dialog_title,
.cpd-theme-dark .mx_Dialog_header h2,
.cpd-theme-dark .mx_Dialog h1,
.cpd-theme-dark .mx_Dialog h2,
.cpd-theme-dark .mx_Dialog h3,
.theme-dark .mx_Dialog_title,
.theme-dark .mx_Dialog_header h2,
.theme-dark .mx_Dialog h1,
.theme-dark .mx_Dialog h2,
.theme-dark .mx_Dialog h3 {
  color: #FFFFFF !important;
}

.cpd-theme-dark .mx_Dialog_content,
.cpd-theme-dark .mx_Dialog_content > p,
.cpd-theme-dark .mx_Dialog p,
.theme-dark .mx_Dialog_content,
.theme-dark .mx_Dialog_content > p,
.theme-dark .mx_Dialog p {
  color: #94A3B8 !important;
}

.cpd-theme-dark .mx_Dialog_cancelButton,
.theme-dark .mx_Dialog_cancelButton {
  filter: invert(1) opacity(0.7) !important;
}

.cpd-theme-dark .mx_Dialog_cancelButton:hover,
.theme-dark .mx_Dialog_cancelButton:hover {
  opacity: 1 !important;
}

/* Invite Dialog Loading & Spinner States */
.mx_InviteDialog_spinner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 16px !important;
  text-align: center !important;
}

.mx_InviteDialog_spinner_title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin-top: 16px !important;
  color: #0F172A !important;
}

.mx_InviteDialog_spinner_subtext {
  font-size: 0.875rem !important;
  color: #64748B !important;
  margin-top: 6px !important;
}

.cpd-theme-dark .mx_InviteDialog_spinner_title,
.theme-dark .mx_InviteDialog_spinner_title {
  color: #F8FAFC !important;
}

.cpd-theme-dark .mx_InviteDialog_spinner_subtext,
.theme-dark .mx_InviteDialog_spinner_subtext {
  color: #94A3B8 !important;
}

/* Default Standard Fixed-Width Dialogs (Alerts, Prompts, Confirmations) */
.mx_Dialog_fixedWidth {
  width: 100% !important;
  max-width: 520px !important;
}

/* Specific Small Confirm / Alert Dialogs */
.mx_Dialog:has(.mx_ConfirmUserActionDialog),
.mx_Dialog:has(.mx_ErrorDialog),
.mx_Dialog:has(.mx_QuestionDialog),
.mx_Dialog:has(.mx_LeaveRoomDialog),
.mx_Dialog:has(.mx_LeaveSpaceDialog),
.mx_Dialog:has(.mx_LogoutDialog),
.mx_Dialog:has(.mx_DeactivateAccountDialog),
.mx_Dialog:has(.mx_UnpinAllDialog),
.mx_Dialog_border:has(.mx_ConfirmUserActionDialog),
.mx_Dialog_border:has(.mx_ErrorDialog),
.mx_Dialog_border:has(.mx_QuestionDialog),
.mx_Dialog_border:has(.mx_LogoutDialog) {
  width: 100% !important;
  max-width: 480px !important;
}

/* Medium Dialogs (Invites, Create Room, Forward, Upload Preview, Export, Polls) */
.mx_Dialog:has(.mx_InviteDialog),
.mx_Dialog:has(.mx_CreateRoomDialog),
.mx_Dialog:has(.mx_ForwardDialog),
.mx_Dialog:has(.mx_UploadConfirmDialog),
.mx_Dialog:has(.mx_ExportDialog),
.mx_Dialog:has(.mx_PollCreateDialog),
.mx_Dialog:has(.mx_DevtoolsDialog),
.mx_Dialog:has(.mx_ShareDialog),
.mx_Dialog:has(.mx_MessageEditHistoryDialog),
.mx_Dialog:has(.mx_ModalWidgetDialog),
.mx_Dialog:has(.mx_BugReportDialog),
.mx_Dialog:has(.mx_FeedbackDialog),
.mx_Dialog_border:has(.mx_InviteDialog),
.mx_Dialog_border:has(.mx_CreateRoomDialog),
.mx_Dialog_border:has(.mx_ForwardDialog),
.mx_Dialog_border:has(.mx_UploadConfirmDialog),
.mx_Dialog_border:has(.mx_ExportDialog),
.mx_Dialog_border:has(.mx_PollCreateDialog),
.mx_Dialog_border:has(.mx_DevtoolsDialog),
.mx_Dialog_border:has(.mx_ShareDialog) {
  width: 100% !important;
  max-width: 620px !important;
}

/* Wide Verification & Key Setup Dialogs (QR + Emoji Multi-Column Verification) */
.mx_Dialog:has(.mx_VerificationPanel),
.mx_Dialog:has(.mx_EncryptionPanel),
.mx_Dialog:has(.mx_VerificationPanel_QRPhase_startOptions),
.mx_Dialog:has(.mx_IncomingSasDialog),
.mx_Dialog:has(.mx_CreateCrossSigningDialog),
.mx_Dialog:has(.mx_AccessSecretStorageDialog),
.mx_Dialog:has(.mx_CreateSecretStorageDialog),
.mx_Dialog:has(.mx_RestoreKeyBackupDialog),
.mx_Dialog_border:has(.mx_VerificationPanel),
.mx_Dialog_border:has(.mx_EncryptionPanel),
.mx_Dialog_border:has(.mx_VerificationPanel_QRPhase_startOptions),
.mx_Dialog_border:has(.mx_IncomingSasDialog),
.mx_Dialog_border:has(.mx_CreateCrossSigningDialog),
.mx_Dialog_border:has(.mx_AccessSecretStorageDialog),
.mx_Dialog_border:has(.mx_CreateSecretStorageDialog),
.mx_Dialog_border:has(.mx_RestoreKeyBackupDialog) {
  width: 100% !important;
  max-width: 740px !important;
  min-width: min(720px, calc(100vw - 48px)) !important;
}

/* Large Multi-Tab Settings Dialogs (User Settings, Room Settings, Space Settings) */
.mx_Dialog:has(.mx_UserSettingsDialog),
.mx_Dialog:has(.mx_RoomSettingsDialog),
.mx_Dialog:has(.mx_SpaceSettingsDialog),
.mx_Dialog:has(.mx_SpacePreferencesDialog),
.mx_Dialog_border:has(.mx_UserSettingsDialog),
.mx_Dialog_border:has(.mx_RoomSettingsDialog),
.mx_Dialog_border:has(.mx_SpaceSettingsDialog),
.mx_Dialog_border:has(.mx_SpacePreferencesDialog),
.mx_UserSettingsDialog,
.mx_RoomSettingsDialog,
.mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog {
  width: 90vw !important;
  max-width: 960px !important;
  height: 82vh !important;
  max-height: 82vh !important;
}

/* Spotlight Quick Search (Cmd+K / Ctrl+K Palette Remediation)
   1. Fixes width collapse (from 224px shrink-wrap to comfortable 680px luxury palette).
   2. Eliminates giant empty blank space on empty / few results via height: auto !important.
   3. Uses @layer app-web to override Element Web internal layered styles with highest cascade priority.
*/
@layer app-web {
  body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_SpotlightDialog_wrapper .mx_Dialog,
  .cpd-theme-light .mx_SpotlightDialog_wrapper .mx_Dialog {
    width: min(680px, 92vw) !important;
    min-width: min(680px, 92vw) !important;
    max-width: 680px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 85vh !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.22), 0 8px 24px -4px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 4006 !important;
  }

  body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_SpotlightDialog,
  .cpd-theme-light .mx_SpotlightDialog {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
  }

  /* Dark theme layered Spotlight overrides */
  .cpd-theme-dark .mx_SpotlightDialog_wrapper .mx_Dialog,
  .cpd-theme-dark-hc .mx_SpotlightDialog_wrapper .mx_Dialog,
  .theme-dark .mx_SpotlightDialog_wrapper .mx_Dialog,
  [data-mx-theme*="dark" i] .mx_SpotlightDialog_wrapper .mx_Dialog,
  body[class*="dark"] .mx_SpotlightDialog_wrapper .mx_Dialog {
    width: min(680px, 92vw) !important;
    min-width: min(680px, 92vw) !important;
    max-width: 680px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 85vh !important;
    border-radius: 20px !important;
    background: #151924 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 8px 24px -4px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 4006 !important;
  }

  .cpd-theme-dark .mx_SpotlightDialog,
  .cpd-theme-dark-hc .mx_SpotlightDialog,
  .theme-dark .mx_SpotlightDialog,
  [data-mx-theme*="dark" i] .mx_SpotlightDialog,
  body[class*="dark"] .mx_SpotlightDialog {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    background: #151924 !important;
    color: #F8FAFC !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
  }

  .mx_SpotlightDialog #mx_SpotlightDialog_content {
    height: auto !important;
    min-height: unset !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding: 12px 16px 16px !important;
  }
}

/* Standalone / Unlayered safety overrides */
.mx_SpotlightDialog_wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 4005 !important;
}

.mx_SpotlightDialog_wrapper .mx_Dialog_border {
  display: contents !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

/* Search input bar - Light Mode */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  color: #0F172A !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
}

/* Search input bar - Dark Mode */
.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
.cpd-theme-dark-hc .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
[data-mx-theme*="dark" i] .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
body[class*="dark"] .mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #182234 !important;
  display: flex !important;
  align-items: center !important;
}

.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
.cpd-theme-dark-hc .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
[data-mx-theme*="dark" i] .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
body[class*="dark"] .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox input::placeholder {
  color: #94A3B8 !important;
  font-size: 15px !important;
}

/* Section headers */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader h4,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #64748B !important;
  text-transform: none !important;
  margin: 8px 6px 6px !important;
}

.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader,
.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader {
  color: #94A3B8 !important;
}

/* Result & Option rows */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 2px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  color: #1E293B !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option,
.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option {
  color: #E2E8F0 !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option:hover,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option:hover,
.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"],
.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option:hover,
.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* Keyboard shortcut prompt badge above dialog */
.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt {
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt kbd {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: inherit !important;
  font-size: 11px !important;
}

/* Scrollable Base Dialog & Compound Dialog support */
.mx_ScrollableBaseDialog {
  width: 560px !important;
  max-width: 92vw !important;
}

/* Universal Circular Close Button (X) - Top Right Corner */
.mx_Dialog_cancelButton,
.mx_CompoundDialog_cancelButton,
.mx_Dialog .mx_Dialog_cancelButton,
.mx_Dialog_border .mx_Dialog_cancelButton {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border: none !important;
  z-index: 50 !important;
}

/* Close Button - Light Mode */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_cancelButton,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_cancelButton,
.cpd-theme-light .mx_Dialog_cancelButton {
  background: #F1F5F9 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_cancelButton:hover,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_cancelButton:hover,
.cpd-theme-light .mx_Dialog_cancelButton:hover {
  background: #E2E8F0 !important;
  transform: scale(1.06) !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_cancelButton svg,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_cancelButton svg,
.cpd-theme-light .mx_Dialog_cancelButton svg {
  width: 16px !important;
  height: 16px !important;
  color: #64748B !important;
}

/* Close Button - Dark Mode */
.cpd-theme-dark .mx_Dialog_cancelButton,
.cpd-theme-dark .mx_CompoundDialog_cancelButton,
.cpd-theme-dark-hc .mx_Dialog_cancelButton,
.theme-dark .mx_Dialog_cancelButton,
[data-mx-theme*="dark" i] .mx_Dialog_cancelButton,
body[class*="dark"] .mx_Dialog_cancelButton {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.cpd-theme-dark .mx_Dialog_cancelButton:hover,
.cpd-theme-dark .mx_CompoundDialog_cancelButton:hover,
.theme-dark .mx_Dialog_cancelButton:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: scale(1.06) !important;
}

.cpd-theme-dark .mx_Dialog_cancelButton svg,
.cpd-theme-dark .mx_CompoundDialog_cancelButton svg,
.theme-dark .mx_Dialog_cancelButton svg {
  width: 16px !important;
  height: 16px !important;
  color: #E2E8F0 !important;
}

/* Dialog Header with Reserved Close Button Clearance */
.mx_Dialog_header,
.mx_CompoundDialog_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  padding: 0 48px 0 0 !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_Dialog_title,
.mx_Dialog_header h1,
.mx_Dialog_header h2,
.mx_CompoundDialog_header h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.2px !important;
  word-break: break-word !important;
}

/* Dialog Content Typography & Spacing */
.mx_Dialog_content {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Verification Phase 1: QR & Emoji Options side-by-side cards */
.mx_VerificationPanel_QRPhase_startOptions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 20px 0 12px !important;
  box-sizing: border-box !important;
}

.mx_VerificationPanel_QRPhase_betweenText {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  color: #64748B !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}

.mx_VerificationPanel_QRPhase_startOption {
  border-radius: 18px !important;
  padding: 20px !important;
  flex: 1 1 0px !important;
  min-width: 240px !important;
  max-width: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* Light Mode */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_VerificationPanel_QRPhase_startOption,
.cpd-theme-light .mx_VerificationPanel_QRPhase_startOption {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_VerificationPanel_QRPhase_startOption > p,
.cpd-theme-light .mx_VerificationPanel_QRPhase_startOption > p {
  color: #0F172A !important;
}

/* Dark Mode */
.cpd-theme-dark .mx_VerificationPanel_QRPhase_startOption,
.cpd-theme-dark-hc .mx_VerificationPanel_QRPhase_startOption,
.theme-dark .mx_VerificationPanel_QRPhase_startOption,
[data-mx-theme*="dark" i] .mx_VerificationPanel_QRPhase_startOption,
body[class*="dark"] .mx_VerificationPanel_QRPhase_startOption {
  background: #1E293B !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cpd-theme-dark .mx_VerificationPanel_QRPhase_startOption > p,
.theme-dark .mx_VerificationPanel_QRPhase_startOption > p {
  color: #FFFFFF !important;
}

.cpd-theme-dark .mx_VerificationPanel_QRPhase_helpText,
.theme-dark .mx_VerificationPanel_QRPhase_helpText {
  color: #94A3B8 !important;
}

.mx_VerificationPanel_QRPhase_startOption:hover {
  border-color: #1A9EE0 !important;
  box-shadow: 0 6px 18px rgba(26, 158, 224, 0.12) !important;
}

.mx_VerificationPanel_QRPhase_startOption > p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 0 10px !important;
}

.mx_VerificationPanel_QRPhase_helpText {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748B !important;
  margin: 12px 0 18px !important;
  text-align: center !important;
}

.mx_VerificationPanel_QRPhase_startOption .mx_AccessibleButton {
  border-radius: 9999px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 28px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
  transition: all 0.2s ease !important;
  width: auto !important;
  min-width: 120px !important;
  border: none !important;
}

.mx_VerificationPanel_QRPhase_startOption .mx_AccessibleButton:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

/* Verification Phase Done: Device Verified (Clean Centered Layout) */
.mx_VerificationPanel_verified_section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 12px 0 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_VerificationPanel_verified_section > p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  text-align: center !important;
  margin: 8px 0 !important;
  max-width: 480px !important;
  word-break: break-word !important;
}

.mx_VerificationPanel_verified_section .mx_E2EIcon {
  margin: 20px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mx_VerificationPanel_verified_section .mx_AccessibleButton,
.mx_VerificationPanel_verified_section .mx_UserInfo_wideButton {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 24px auto 4px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 9999px !important;
  background: #0F172A !important;
  color: #FFFFFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.mx_VerificationPanel_verified_section .mx_AccessibleButton:hover,
.mx_VerificationPanel_verified_section .mx_UserInfo_wideButton:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

/* Verification SAS & Reciprocate Button Row */
.mx_VerificationPanel_reciprocateButtons,
.mx_VerificationShowSas_buttonRow {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_VerificationPanel_reciprocateButtons .mx_AccessibleButton,
.mx_VerificationShowSas_buttonRow .mx_AccessibleButton {
  border-radius: 9999px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 24px !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Dialog Action Buttons Row & Footer */
.mx_Dialog_buttons,
.mx_CompoundDialog_footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_Dialog_buttons_row {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* All dialog buttons standard luxury pill */
.mx_Dialog_buttons button,
.mx_Dialog_buttons ._button_1nw83_8,
.mx_Dialog_buttons .mx_AccessibleButton,
.mx_Dialog_buttons .mx_LegacyDialogButton,
.mx_CompoundDialog_footer button,
.mx_CompoundDialog_footer .mx_AccessibleButton {
  border-radius: 9999px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 24px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Primary Dialog Button */
.mx_Dialog_buttons button[data-kind="primary"],
.mx_Dialog_buttons ._kind-primary_1nw83_65,
.mx_Dialog_buttons [class*="_kind-primary"],
.mx_Dialog_buttons .mx_Dialog_primary,
.mx_Dialog_buttons .mx_LegacyDialogButton.mx_Dialog_primary,
.mx_CompoundDialog_footer button[data-kind="primary"],
.mx_CompoundDialog_footer [class*="_kind-primary"],
.mx_Dialog .mx_AccessibleButton_kind_primary {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
}

.mx_Dialog_buttons button[data-kind="primary"]:hover,
.mx_Dialog_buttons ._kind-primary_1nw83_65:hover,
.mx_Dialog_buttons [class*="_kind-primary"]:hover,
.mx_Dialog_buttons .mx_Dialog_primary:hover,
.mx_CompoundDialog_footer button[data-kind="primary"]:hover,
.mx_CompoundDialog_footer [class*="_kind-primary"]:hover,
.mx_Dialog .mx_AccessibleButton_kind_primary:hover {
  background: #1E293B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22) !important;
}

/* Secondary / Cancel Dialog Button - Light Mode */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons button.cancel,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons button[data-kind="secondary"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons ._kind-secondary_1nw83_75,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons [class*="_kind-secondary"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons .mx_LegacyDialogButton.cancel,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_footer button.cancel,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_footer button[data-kind="secondary"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_footer [class*="_kind-secondary"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog .mx_AccessibleButton_kind_secondary,
.cpd-theme-light .mx_Dialog_buttons button.cancel {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons button.cancel:hover,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog_buttons button[data-kind="secondary"]:hover,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_footer button.cancel:hover,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_CompoundDialog_footer button[data-kind="secondary"]:hover,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog .mx_AccessibleButton_kind_secondary:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  transform: translateY(-1px) !important;
}

/* Secondary / Cancel Dialog Button - Dark Mode */
.cpd-theme-dark .mx_Dialog_buttons button.cancel,
.cpd-theme-dark .mx_Dialog_buttons button[data-kind="secondary"],
.cpd-theme-dark .mx_Dialog_buttons [class*="_kind-secondary"],
.cpd-theme-dark .mx_Dialog_buttons .mx_LegacyDialogButton.cancel,
.cpd-theme-dark .mx_CompoundDialog_footer button.cancel,
.cpd-theme-dark .mx_CompoundDialog_footer button[data-kind="secondary"],
.cpd-theme-dark .mx_CompoundDialog_footer [class*="_kind-secondary"],
.cpd-theme-dark .mx_Dialog .mx_AccessibleButton_kind_secondary,
.cpd-theme-dark-hc .mx_Dialog_buttons button.cancel,
.theme-dark .mx_Dialog_buttons button.cancel,
.theme-dark .mx_Dialog_buttons button[data-kind="secondary"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.cpd-theme-dark .mx_Dialog_buttons button.cancel:hover,
.cpd-theme-dark .mx_Dialog_buttons button[data-kind="secondary"]:hover,
.cpd-theme-dark .mx_CompoundDialog_footer button.cancel:hover,
.cpd-theme-dark .mx_CompoundDialog_footer button[data-kind="secondary"]:hover,
.cpd-theme-dark .mx_Dialog .mx_AccessibleButton_kind_secondary:hover,
.theme-dark .mx_Dialog_buttons button.cancel:hover,
.theme-dark .mx_Dialog_buttons button[data-kind="secondary"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Danger / Destructive Dialog Button */
.mx_Dialog_buttons button[data-kind="destructive"],
.mx_Dialog_buttons [class*="_kind-destructive"],
.mx_Dialog_buttons .danger,
.mx_CompoundDialog_footer button[data-kind="destructive"],
.mx_CompoundDialog_footer [class*="_kind-destructive"] {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.2) !important;
}

.mx_Dialog_buttons button[data-kind="destructive"]:hover,
.mx_Dialog_buttons [class*="_kind-destructive"]:hover,
.mx_CompoundDialog_footer button[data-kind="destructive"]:hover {
  background: #B91C1C !important;
  transform: translateY(-1px) !important;
}

/* Inputs & Form Fields inside Dialogs - Light Mode */
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog input[type="text"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog input[type="password"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog input[type="email"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog input[type="search"],
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog textarea,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog select,
.cpd-theme-light .mx_Dialog input[type="text"] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 12px !important;
  border: 1px solid #CBD5E1 !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog input:focus,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog textarea:focus,
body:not(.cpd-theme-dark):not(.cpd-theme-dark-hc):not([class*="dark"]):not([data-theme="dark"]) .mx_Dialog select:focus {
  border-color: #1A9EE0 !important;
  box-shadow: 0 0 0 3px rgba(26, 158, 224, 0.15) !important;
  outline: none !important;
  background: #FFFFFF !important;
}

/* Inputs & Form Fields inside Dialogs - Dark Mode */
.cpd-theme-dark .mx_Dialog input[type="text"],
.cpd-theme-dark .mx_Dialog input[type="password"],
.cpd-theme-dark .mx_Dialog input[type="email"],
.cpd-theme-dark .mx_Dialog input[type="search"],
.cpd-theme-dark .mx_Dialog textarea,
.cpd-theme-dark .mx_Dialog select,
.cpd-theme-dark-hc .mx_Dialog input,
.theme-dark .mx_Dialog input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #1E293B !important;
  color: #F8FAFC !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
}

.cpd-theme-dark .mx_Dialog input:focus,
.cpd-theme-dark .mx_Dialog textarea:focus,
.cpd-theme-dark .mx_Dialog select:focus,
.cpd-theme-dark-hc .mx_Dialog input:focus,
.theme-dark .mx_Dialog input:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
  outline: none !important;
  background: #243044 !important;
  color: #FFFFFF !important;
}

/* 11. Mobile Web (mweb) Precision Adjustments */
@media (max-width: 768px) {
  .mx_Dialog:has(.mx_VerificationPanel),
  .mx_Dialog:has(.mx_EncryptionPanel),
  .mx_Dialog_border:has(.mx_VerificationPanel),
  .mx_Dialog_border:has(.mx_EncryptionPanel) {
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }
  .mx_VerificationPanel_QRPhase_startOptions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .mx_VerificationPanel_QRPhase_startOption {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .mx_AuthPage {
    padding: 20px 12px 16px !important;
  }
  .mx_AuthPage_modal {
    margin: auto 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
  }
  .mx_DefaultWelcome_logo,
  .mx_AuthHeaderLogo {
    max-width: 320px !important;
    padding: 24px 16px 0 !important;
  }
  .mx_AuthBody {
    padding: 10px 20px 14px !important;
  }
  .mx_AuthBody > * {
    max-width: 340px !important;
  }
  .mx_LanguageDropdown,
  .mx_AuthBody_language {
    margin-bottom: 16px !important;
  }
  .mx_CompleteSecurityBody {
    padding: 24px 16px 28px !important;
  }
  .mx_Dialog_wrapper:not(.mx_AuthPage) .mx_Dialog_border,
  .mx_Dialog_wrapper:not(.mx_AuthPage) [class*="_glass"],
  .mx_Dialog_border:not(.mx_AuthPage *) {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
    border-radius: 20px !important;
  }
  .mx_Dialog_wrapper:not(.mx_AuthPage) .mx_Dialog,
  .mx_Dialog:not(.mx_AuthPage *) {
    padding: 20px 18px 18px !important;
    border-radius: 20px !important;
    max-height: calc(90vh - 24px) !important;
  }
  .mx_Dialog_cancelButton,
  .mx_CompoundDialog_cancelButton {
    top: 14px !important;
    right: 14px !important;
  }
  .mx_AuthFooter {
    padding: 16px 12px 8px !important;
  }
  .mx_HomePage_default img {
    max-width: min(340px, 86vw) !important;
  }
  .mx_HomePage_default .mx_HomePage_default_buttons {
    margin-top: 32px !important;
  }
}

/* ==========================================================================
   12. Home Empty State (Chat Kosong / Welcome Screen)
   Enlarge Stream E2EE Logo & Tagline to luxury prominent dimensions
   ========================================================================== */

/* Main logo image on home screen (enlarged from 48px to 420px max-width) */
.mx_HomePage_default img {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto 12px !important;
  display: block !important;
}

/* Hide duplicate "Welcome to Stream E2EE" and "Own your conversations" */
.mx_HomePage_default h1,
.mx_HomePage_default h2 {
  display: none !important;
}

/* Spacing and typography for action buttons row below the logo */
.mx_HomePage_default .mx_HomePage_default_buttons {
  margin-top: 48px !important;
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}

.mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   13. Thread Summary Alignment in Bubble Layout
   Ensure thread replies sit neatly directly underneath the chat bubble
   ========================================================================== */

/* For outgoing / own messages: align thread summary pill to the right under the bubble */
[class*="_stateOwnEvent"][class*="_layoutBubble"] [class*="_slotThreadInfo"],
.mx_EventTile_own [class*="_slotThreadInfo"],
.mx_EventTile[data-layout="bubble"].mx_EventTile_own [class*="_slotThreadInfo"],
.mx_EventTile[data-layout="bubble"].mx_EventTile_own .mx_ThreadSummary,
[class*="_stateOwnEvent"] [data-testid="event-tile-slot-threadInfo"],
[class*="_stateOwnEvent"] .mx_ThreadSummary,
[class*="_stateOwnEvent"] [class*="_threadSummary"],
.mx_EventTile_own .mx_ThreadSummary,
[data-own-event="true"] [class*="_slotThreadInfo"],
[data-own-event="true"] .mx_ThreadSummary {
  margin-left: auto !important;
  margin-right: -11px !important;
  margin-inline: auto -11px !important;
  max-width: var(--event-tile-bubble-line-max-width, 70%) !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Ensure the button inside respects max-width and right alignment */
[class*="_stateOwnEvent"] [class*="_slotThreadInfo"] > button,
[class*="_stateOwnEvent"] .mx_ThreadSummary,
.mx_EventTile_own .mx_ThreadSummary {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* For incoming messages: ensure clean left alignment matching the bubble */
[class*="_layoutBubble"]:not([class*="_stateOwnEvent"]) [class*="_slotThreadInfo"],
.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_own) [class*="_slotThreadInfo"],
.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_own) .mx_ThreadSummary,
:not([class*="_stateOwnEvent"]) > [data-testid="event-tile-slot-threadInfo"],
:not(.mx_EventTile_own) > [class*="_slotThreadInfo"] {
  margin-left: -11px !important;
  margin-right: auto !important;
  margin-inline: -11px auto !important;
  max-width: var(--event-tile-bubble-line-max-width, 70%) !important;
  display: flex !important;
  justify-content: flex-start !important;
}

[class*="_layoutBubble"]:not([class*="_stateOwnEvent"]) [class*="_slotThreadInfo"] > button,
.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_own) .mx_ThreadSummary {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Thread summary typography and interactive hover polish */
.mx_ThreadSummary,
[class*="_threadSummary"] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}

.mx_ThreadSummary:hover,
[class*="_threadSummary"]:hover {
  transform: translateY(-1px) !important;
}