@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   SecureChat Typography & Brand Design Tokens
   ========================================================================== */
:root {
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace !important;
  --cpd-font-family-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --cpd-font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace !important;
  --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-family-monospace: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace !important;

  /* SecureChat Dark Theme Default Tokens (Exact match with Login Design) */
  --bg-page: #111215;
  --bg-card: #18191c;
  --border: #27272a;
  --border-subtle: #1f2125;
  --nav-bg: transparent;
  --hover-bg: #27272a;
  --active-bg: #32353b;

  --text-main: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;

  --primary: #10b981;
  --primary-hover: #059669;
  --primary-active: #047857;
  --primary-text: #ffffff;
  --primary-glow: rgba(16, 185, 129, 0.2);

  --input-bg: #131417;
  --input-border: #27272a;
  --input-focus-border: #10b981;

  --danger-text: #f87171;
  --danger-bg: rgba(239, 68, 68, 0.08);
  --danger-border: #27272a;

  --success-text: #34d399;
  --success-bg: rgba(16, 185, 129, 0.08);
  --success-border: #27272a;

  --radius: 10px;
  --radius-card: 16px;
  --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}

/* Disable transitions instantly during theme toggle to prevent frame drops and color stutter */
.theme-transitioning,
.theme-transitioning * {
  transition: none !important;
}

html.theme-dark:not([class*="light"]),
html.cpd-theme-dark:not([class*="light"]),
body.theme-dark:not([class*="light"]),
body.cpd-theme-dark:not([class*="light"]),
html:not([class*="light"]),
body:not([class*="light"]) {
  --cpd-color-bg-canvas-default: #111215 !important;
  --roomlist-background-color: #111215 !important;
  --header-panel-bg-color: #111215 !important;
  --panel-gradient: #111215 !important;
  --background: #111215 !important;
  background-color: #111215 !important;
  background: #111215 !important;
  color: #f4f4f5 !important;
  color-scheme: dark !important;
}

html.theme-light,
html.cpd-theme-light,
html[class*="light"],
body.theme-light,
body.cpd-theme-light,
body[class*="light"] {
  --bg-page: #f8fafc !important;
  --bg-card: #ffffff !important;
  --border: #e2e8f0 !important;
  --border-subtle: #f1f5f9 !important;
  --hover-bg: #f1f5f9 !important;
  --active-bg: #e2e8f0 !important;
  --text-main: #0f172a !important;
  --text-muted: #64748b !important;
  --text-dim: #94a3b8 !important;
  --input-bg: #ffffff !important;
  --input-border: #cbd5e1 !important;
  --cpd-color-bg-canvas-default: #ffffff !important;
  --roomlist-background-color: #ffffff !important;
  --header-panel-bg-color: #ffffff !important;
  --panel-gradient: #ffffff !important;
  --background: #ffffff !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

/* Application Canvas & MatrixChat Wrappers in Light/Dark Mode */
body.cpd-theme-light #matrixchat,
body.theme-light #matrixchat,
body[class*="light"] #matrixchat,
body.cpd-theme-light .mx_MatrixChat_wrapper,
body.theme-light .mx_MatrixChat_wrapper,
body[class*="light"] .mx_MatrixChat_wrapper,
body.cpd-theme-light .mx_MatrixChat,
body.theme-light .mx_MatrixChat,
body[class*="light"] .mx_MatrixChat {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body.cpd-theme-dark:not([class*="light"]) #matrixchat,
body.theme-dark:not([class*="light"]) #matrixchat,
body:not([class*="light"]) #matrixchat,
body.cpd-theme-dark:not([class*="light"]) .mx_MatrixChat_wrapper,
body.theme-dark:not([class*="light"]) .mx_MatrixChat_wrapper,
body:not([class*="light"]) .mx_MatrixChat_wrapper,
body.cpd-theme-dark:not([class*="light"]) .mx_MatrixChat,
body.theme-dark:not([class*="light"]) .mx_MatrixChat,
body:not([class*="light"]) .mx_MatrixChat {
  background-color: #111215 !important;
  background: #111215 !important;
  color: #f4f4f5 !important;
}

body,
html,
#matrixchat,
#matrixchat *,
input,
textarea,
select,
button,
.mx_AccessibleButton,
.mx_RoomTile,
.mx_RoomTile_name,
.mx_RoomTile_messagePreview,
.mx_RoomHeader,
.mx_RoomHeader_nametext,
.mx_RoomHeader_topic,
.mx_EventTile,
.mx_EventTile_body,
.mx_Dialog,
.mx_Dialog_title,
.mx_SettingsTab,
.mx_ContextualMenu,
.mx_Heading,
.mx_Heading_h1,
.mx_Heading_h2,
.mx_Heading_h3,
.mx_Heading_h4,
.mx_UserMenu_name,
.mx_RoomSublist_headerText,
.mx_BasicMessageComposer_input {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code,
pre,
kbd,
samp,
.mx_EventTile_content code,
.mx_EventTile_content pre,
.mx_EventTile_pre_container,
.mx_DecryptionFailure_dump,
.mx_DevTools,
.mx_SettingsTab_microcopy_mono,
.mx_CopyableText,
.mx_RoomSettingsDialog_section_id code,
.mx_MatrixChat_badge_mono {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
}

/* Fix Element Web bug (vector-im/element-web#15797) where empty room/people lists show loading skeletons forever */
.mx_RoomSublist_skeletonUI {
  display: none !important;
}

/* Skeleton Screens & Loading Placeholders: match dark login theme (#111215, #18191c, #27272a) */
@keyframes sc-skeleton-shimmer {
  0% {
    background-color: #18191c;
    border-color: #27272a;
    opacity: 0.6;
  }
  50% {
    background-color: #22242a;
    border-color: #2e3036;
    opacity: 0.95;
  }
  100% {
    background-color: #18191c;
    border-color: #27272a;
    opacity: 0.6;
  }
}

body:not(.theme-light):not(.cpd-theme-light) [class*="skeleton"]:not(.mx_RoomSublist_skeletonUI),
body:not(.theme-light):not(.cpd-theme-light) [class*="Skeleton"]:not(.mx_RoomSublist_skeletonUI),
body:not(.theme-light):not(.cpd-theme-light) .mx_Skeleton,
body:not(.theme-light):not(.cpd-theme-light) .mx_RoomTile_skeleton,
body:not(.theme-light):not(.cpd-theme-light) .mx_EventTile_skeleton,
body:not(.theme-light):not(.cpd-theme-light) .mx_TimelineLoader,
body:not(.theme-light):not(.cpd-theme-light) .mx_RoomView_skeleton,
body.theme-dark [class*="skeleton"]:not(.mx_RoomSublist_skeletonUI),
body.cpd-theme-dark [class*="skeleton"]:not(.mx_RoomSublist_skeletonUI),
body.theme-dark [class*="Skeleton"]:not(.mx_RoomSublist_skeletonUI),
body.cpd-theme-dark [class*="Skeleton"]:not(.mx_RoomSublist_skeletonUI),
body.theme-dark .mx_Skeleton,
body.cpd-theme-dark .mx_Skeleton,
body.theme-dark .mx_RoomTile_skeleton,
body.cpd-theme-dark .mx_RoomTile_skeleton,
body.theme-dark .mx_EventTile_skeleton,
body.cpd-theme-dark .mx_EventTile_skeleton,
body.theme-dark .mx_TimelineLoader,
body.cpd-theme-dark .mx_TimelineLoader,
body.theme-dark .mx_RoomView_skeleton,
body.cpd-theme-dark .mx_RoomView_skeleton {
  background-color: #18191c !important;
  background: #18191c !important;
  border-color: #27272a !important;
  color: #71717a !important;
  border-radius: 6px !important;
  animation: sc-skeleton-shimmer 1.6s ease-in-out infinite !important;
}

/* Instant preloader displayed before React bundle mounts to eliminate blank screen */
#sc-initial-loader {
  height: 100vh !important;
  width: 100vw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #111215 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out !important;
}

body:has(#matrixchat:not(:empty)) #sc-initial-loader {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#sc-initial-loader .sc-brand {
  display: none !important;
}

.sc-initial-spinner {
  margin-bottom: 0 !important;
}

.sc-initial-spinner,
.sc-canonical-spinner,
.page-spinner,
.mx_Spinner_icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  border: 3px solid transparent !important;
  border-top-color: #10b981 !important;
  border-radius: 50% !important;
  animation: sc-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-color: transparent !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Completely suppress any native Element Web pseudo-elements inside the spinner */
.sc-initial-spinner::before,
.sc-initial-spinner::after,
.sc-canonical-spinner::before,
.sc-canonical-spinner::after,
.page-spinner::before,
.page-spinner::after,
.mx_Spinner_icon::before,
.mx_Spinner_icon::after,
.mx_Spinner_icon:before,
.mx_Spinner_icon:after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: transparent !important;
  mask: none !important;
  -webkit-mask: none !important;
}

@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

/* Minimal spinner styling during initial session loading */
.mx_MatrixChat_splash {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #111215 !important;
}

.mx_MatrixChat_splash::before,
.mx_MatrixChat_splash::after {
  display: none !important;
  content: none !important;
}

.mx_MatrixChat_splash .mx_LoginSplashView_splashButtons,
.mx_MatrixChat_splash p,
.mx_MatrixChat_splash h1,
.mx_MatrixChat_splash h2 {
  display: none !important;
}

.mx_MatrixChat_splash .mx_Spinner,
.mx_Spinner {
  width: 42px !important;
  height: 42px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  position: relative !important;
  top: auto !important;
}

/* Ensure room creation & room view loading states are centered with ample breathing room */
.mx_RoomView_loader,
.mx_RoomView_spinner,
.mx_RoomView_skeleton,
.mx_RoomView_loading,
.mx_RoomView:not(:has(.mx_RoomHeader)),
.mx_RoomView_messagePanel .mx_Spinner,
.mx_MainSplit > .mx_Spinner,
.mx_RoomView > .mx_Spinner,
.mx_RoomView_body > .mx_Spinner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 280px !important;
  height: 100% !important;
  width: 100% !important;
  margin: auto !important;
  padding: 60px 24px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Mobile & Tablet Responsiveness Rules
   ========================================================================== */

/* Desktop defaults: back button hidden (> 768px) */
@media (min-width: 768px) {
  .sc-mobile-back-btn {
    display: none !important;
  }
}

/* Suppress mobile guide toast and promotional banners */
.mx_MobileGuideToast,
[data-testid="mobile-guide-toast"],
.mx_Toast_toast:has([data-testid="mobile-guide-toast"]),
.mx_Toast_toast:has(.mx_MobileGuideToast) {
  display: none !important;
}

/* Settings tabs: on mobile (<= 767.98px), tab labels become horizontal scrollable pills */
@media (max-width: 767.98px) {
  .mx_TabbedView,
  .mx_TabbedView.mx_TabbedView_tabsOnLeft {
    flex-direction: column !important;
    display: flex !important;
    position: relative !important;
    top: 0 !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mx_TabbedView_tabLabels,
  .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--cpd-color-border-subtle, rgba(255, 255, 255, 0.1)) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    list-style: none !important;
    margin: 0 !important;
    position: static !important;
    -webkit-overflow-scrolling: touch;
  }
  .mx_TabbedView_tabLabel {
    flex: 0 0 auto !important;
    padding: 7px 14px !important;
    border-radius: 9999px !important;
    margin: 0 !important;
    min-height: 34px !important;
    font-size: 13.5px !important;
    text-align: center !important;
  }
  .mx_TabbedView_tabLabel_text {
    display: inline !important;
  }
  .mx_TabbedView_tabPanel,
  .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  .mx_TabbedView_tabPanelContent {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 18px 16px 40px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
  /* Hide resize handles */
  #lp-resizer,
  .mx_ResizeHandle {
    display: none !important;
  }

  /* Two-state master-detail: Viewing a room */
  body.sc-in-room .mx_LeftPanel_outerWrapper,
  body.sc-in-room .mx_SpacePanel,
  body.sc-in-room .mx_HomePage,
  body.sc-in-room .mx_HomePage_loggedIn,
  body.sc-in-room .mx_HomePage_default,
  .mx_MatrixChat:has(.mx_RoomView) .mx_LeftPanel_outerWrapper,
  .mx_MatrixChat:has(.mx_RoomView) .mx_SpacePanel,
  .mx_MatrixChat:has(.mx_RoomView) .mx_HomePage,
  .mx_MatrixChat:has(.mx_RoomView) .mx_HomePage_loggedIn,
  .mx_MatrixChat:has(.mx_RoomView) .mx_HomePage_default {
    display: none !important;
  }

  body.sc-in-room .mx_RoomView_wrapper,
  .mx_MatrixChat:has(.mx_RoomView) .mx_RoomView_wrapper {
    display: flex !important;
    width: 100vw !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Two-state master-detail: Viewing room list */
  body.sc-in-room-list .mx_RoomView_wrapper,
  body.sc-in-room-list .mx_HomePage,
  body.sc-in-room-list .mx_HomePage_loggedIn,
  body.sc-in-room-list .mx_HomePage_default,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_RoomView_wrapper,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_HomePage,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_HomePage_loggedIn,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_HomePage_default {
    display: none !important;
  }

  body.sc-in-room-list .mx_LeftPanel_outerWrapper,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_LeftPanel_outerWrapper {
    display: flex !important;
    width: 100vw !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  body.sc-in-room-list .mx_LeftPanel_wrapper--user,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_LeftPanel_wrapper--user {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  body.sc-in-room-list .mx_LeftPanel,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_LeftPanel {
    width: 100% !important;
  }

  /* Prominent back button inside .mx_RoomHeader */
  .sc-mobile-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin-right: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--cpd-color-icon-primary, #ffffff) !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .sc-mobile-back-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  .sc-mobile-back-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Full screen & dynamic viewport */
  html, body, #matrixchat, .mx_MatrixChat {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  .mx_MatrixChat_wrapper {
    width: 100% !important;
    height: 100% !important;
  }

  /* Safe areas */
  .mx_RoomHeader {
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    max-height: none !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  .mx_MessageComposer {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.sc-in-room-list .mx_LeftPanel_outerWrapper,
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_LeftPanel_outerWrapper {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
  }

  .mx_SpacePanel {
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton {
    min-height: 44px !important;
  }

  .sc-user-menu-wrapper,
  .mx_ContextualMenu_wrapper:has(.mx_UserMenu_contextMenu) {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* iOS auto-zoom prevention */
  .mx_BasicMessageComposer_input,
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="email"],
  textarea {
    font-size: 16px !important;
  }

  /* Composer fit: remove avatar margin on small screens */
  .mx_MessageComposer_avatar {
    display: none !important;
  }

  .mx_MessageComposer_wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Touch targets: min 44x44px */
  .mx_RoomTile {
    min-height: 44px !important;
  }

  .mx_RoomHeader button,
  .mx_RoomHeader .mx_AccessibleButton,
  .mx_MessageComposer_actions button,
  .mx_MessageComposer_actions .mx_AccessibleButton,
  .mx_MessageComposer_sendMessage,
  .mx_ReactionsRowButton,
  .mx_ReactionRowButton,
  .mx_Dialog_buttons button,
  .mx_Dialog_buttons .mx_AccessibleButton,
  .mx_IconizedContextMenu_item,
  [role="menuitem"],
  .mx_ContextMenuItem,
  .mx_MessageActionBar .mx_AccessibleButton {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Modals & dialogs centering & full-screen layout */
  .mx_Dialog_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
  }

  .mx_Dialog_border {
    max-width: calc(100vw - 20px) !important;
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    margin: auto !important;
    box-sizing: border-box !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Universal single modal container on mobile with zero outer padding */
  .mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog) {
    padding: 0 !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  /* Settings dialogs full height on mobile */
  .mx_Dialog:has(.mx_UserSettingsDialog),
  .mx_Dialog.mx_UserSettingsDialog,
  .mx_Dialog:has(.mx_SpaceSettingsDialog),
  .mx_Dialog.mx_SpaceSettingsDialog,
  .mx_Dialog:has(.mx_RoomSettingsDialog),
  .mx_Dialog.mx_RoomSettingsDialog,
  .mx_Dialog:has(.mx_TabbedView),
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog {
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
  }

  /* Flatten and fill settings dialog wrappers on mobile */
  .mx_UserSettingsDialog,
  .mx_SpaceSettingsDialog,
  .mx_RoomSettingsDialog,
  .mx_SpacePreferencesDialog,
  .mx_SettingsDialog_content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Flatten all other inner dialog wrappers on mobile (zero nested containers) */
  .mx_CreateRoomDialog,
  .mx_InviteDialog,
  .mx_InviteDialog_other,
  .mx_InviteDialog_transfer,
  .mx_Dialog .mx_Dialog_fixedWidth,
  .mx_Dialog_fixedWidth,
  .mx_VerificationRequestDialog,
  .mx_DeviceVerifyDialog,
  .sc-verification-dialog,
  .mx_CompoundDialog_form,
  .mx_CompoundDialog_content,
  .mx_Dialog_content,
  .mx_AccessSecretStorageDialog,
  .mx_CreateSecretStorageDialog,
  .mx_RestoreKeyBackupDialog,
  .mx_FeedbackDialog,
  .mx_ServerNotice_dialog,
  .mx_ExportDialog,
  .mx_DevTools,
  .mx_KeyboardShortcuts,
  .mx_ConfirmUserActionDialog,
  .mx_LeaveSpaceDialog,
  .mx_QuestionDialog,
  .mx_InfoDialog,
  .mx_ErrorDialog,
  .mx_BulkRedactDialog {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Master list: fixed 280px-300px width */
  .mx_LeftPanel_outerWrapper {
    width: 290px !important;
    min-width: 280px !important;
    max-width: 300px !important;
    flex: 0 0 290px !important;
  }

  /* Detail view: flex: 1 */
  .mx_RoomView_wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Right panel: slide-over absolute drawer */
  .mx_RightPanel_ResizeWrapper {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 340px !important;
    max-width: 80vw !important;
    z-index: 200 !important;
  }

  body.cpd-theme-dark:not([class*="light"]) .mx_RightPanel_ResizeWrapper,
  body.theme-dark:not([class*="light"]) .mx_RightPanel_ResizeWrapper,
  body:not([class*="light"]) .mx_RightPanel_ResizeWrapper {
    background: #111215 !important;
    background-color: #111215 !important;
    border-left: 1px solid #27272a !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35) !important;
  }

  body.cpd-theme-light .mx_RightPanel_ResizeWrapper,
  body.theme-light .mx_RightPanel_ResizeWrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ==========================================================================
   Single Unified Sidebar Architecture (Bottom Profile Dock)
   ========================================================================== */

/* Outer wrapper is the sole single sidebar container on the left */
.mx_LeftPanel_outerWrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  contain: none !important;
}

body.cpd-theme-light .mx_LeftPanel_outerWrapper,
body.theme-light .mx_LeftPanel_outerWrapper,
body[class*="light"] .mx_LeftPanel_outerWrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel_outerWrapper,
body.theme-dark:not([class*="light"]) .mx_LeftPanel_outerWrapper,
body:not([class*="light"]) .mx_LeftPanel_outerWrapper {
  background: #111215 !important;
  background-color: #111215 !important;
  border-right: 1px solid #27272a !important;
}

/* Ensure inner elements never produce duplicate/extra borders */
.mx_LeftPanel_wrapper,
.mx_LeftPanel_wrapper--user,
.mx_LeftPanel,
.mx_LeftPanel_roomListContainer,
.mx_LeftPanel_roomListWrapper,
.mx_LeftPanel_actualRoomListContainer,
#lp-resizer,
#lp-resizer > div,
.mx_ResizeHandle.mx_ResizeHandle--horizontal,
.mx_ResizeHandle.mx_ResizeHandle--horizontal > div {
  border-right: none !important;
  border-left: none !important;
}

@media (min-width: 768px) {
  .mx_LeftPanel_outerWrapper {
    width: 320px !important;
    min-width: 260px !important;
    max-width: 460px !important;
    flex: 0 0 320px !important;
    padding-top: 0 !important;
  }
}

/* Inner flex wrapper stacks LeftPanel (Room list) on top of SpacePanel (Profile bar at bottom) */
.mx_LeftPanel_wrapper {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: calc(100% - 56px) !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* 1. ROOM LIST / CHAT LIST (Top & Middle of Sidebar) */
.mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  position: relative !important;
}

.mx_LeftPanel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Search bar filter container at the top of the sidebar */
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
  margin: 4px 12px 2px 12px !important;
  padding: 0 0 6px 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer:empty,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer:not(:has(.mx_RoomSearch, input, .mx_SearchBox)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer,
body:not(.cpd-theme-light):not(.theme-light) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Base search bar container & reset - strictly single border layer */
.mx_RoomSearch,
.mx_SearchBox,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_SearchBox {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  line-height: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Eliminate nested inner input borders and conflicting backgrounds */
.mx_LeftPanel_filterContainer input,
.mx_SearchBox input,
.mx_RoomSearch input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  font-size: 13.5px !important;
  line-height: 20px !important;
}

/* Search Icon - Perfectly vertically centered */
.mx_RoomSearch .mx_RoomSearch_icon,
.mx_SearchBox .mx_SearchBox_searchIcon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 0 0 8px !important;
  margin-bottom: 0 !important;
  mask-position: center !important;
  mask-size: 16px 16px !important;
  mask-repeat: no-repeat !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  transition: background-color 0.15s ease !important;
}

/* Search Trigger Text */
.mx_RoomSearch .mx_RoomSearch_spotlightTriggerText {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.15s ease !important;
}

/* Shortcut prompt badge (Cmd+K / Ctrl+K) */
.mx_RoomSearch .mx_RoomSearch_shortcutPrompt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin: 0 6px 0 0 !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

/* --- LIGHT THEME --- */
body.cpd-theme-light .mx_RoomSearch,
body.theme-light .mx_RoomSearch,
body[class*="light"] .mx_RoomSearch,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch,
body[class*="light"] .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch {
  background-color: rgba(0, 0, 0, 0.035) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-light .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText,
body.theme-light .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText,
body[class*="light"] .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText {
  color: var(--cpd-color-text-secondary, #64748b) !important;
}

body.cpd-theme-light .mx_RoomSearch .mx_RoomSearch_icon,
body.theme-light .mx_RoomSearch .mx_RoomSearch_icon,
body[class*="light"] .mx_RoomSearch .mx_RoomSearch_icon {
  background-color: var(--cpd-color-icon-secondary, #64748b) !important;
}

body.cpd-theme-light .mx_RoomSearch .mx_RoomSearch_shortcutPrompt,
body.theme-light .mx_RoomSearch .mx_RoomSearch_shortcutPrompt,
body[class*="light"] .mx_RoomSearch .mx_RoomSearch_shortcutPrompt {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  color: var(--cpd-color-text-secondary, #64748b) !important;
}

/* Light Theme: Hover */
body.cpd-theme-light .mx_RoomSearch:hover,
body.theme-light .mx_RoomSearch:hover,
body[class*="light"] .mx_RoomSearch:hover,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:hover,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:hover,
body[class*="light"] .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

body.cpd-theme-light .mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText,
body.theme-light .mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText,
body[class*="light"] .mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText {
  color: var(--cpd-color-text-primary, #0f172a) !important;
}

body.cpd-theme-light .mx_RoomSearch:hover .mx_RoomSearch_icon,
body.theme-light .mx_RoomSearch:hover .mx_RoomSearch_icon,
body[class*="light"] .mx_RoomSearch:hover .mx_RoomSearch_icon {
  background-color: var(--cpd-color-icon-primary, #0f172a) !important;
}

body.cpd-theme-light .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt,
body.theme-light .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt,
body[class*="light"] .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--cpd-color-text-primary, #0f172a) !important;
}

/* Light Theme: Focus & Focus-Visible (Emerald Ring) */
body.cpd-theme-light .mx_RoomSearch:focus,
body.theme-light .mx_RoomSearch:focus,
body[class*="light"] .mx_RoomSearch:focus,
body.cpd-theme-light .mx_RoomSearch:focus-visible,
body.theme-light .mx_RoomSearch:focus-visible,
body[class*="light"] .mx_RoomSearch:focus-visible,
body.cpd-theme-light .mx_RoomSearch:focus-within,
body.theme-light .mx_RoomSearch:focus-within,
body[class*="light"] .mx_RoomSearch:focus-within,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-within,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-within,
body[class*="light"] .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-within {
  background-color: #ffffff !important;
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.cpd-theme-light .mx_RoomSearch:focus-within .mx_RoomSearch_spotlightTriggerText,
body.theme-light .mx_RoomSearch:focus-within .mx_RoomSearch_spotlightTriggerText,
body[class*="light"] .mx_RoomSearch:focus-within .mx_RoomSearch_spotlightTriggerText {
  color: var(--cpd-color-text-primary, #0f172a) !important;
}

body.cpd-theme-light .mx_RoomSearch:focus-within .mx_RoomSearch_icon,
body.theme-light .mx_RoomSearch:focus-within .mx_RoomSearch_icon,
body[class*="light"] .mx_RoomSearch:focus-within .mx_RoomSearch_icon {
  background-color: #10b981 !important;
}

/* Light Theme: Active */
body.cpd-theme-light .mx_RoomSearch:active,
body.theme-light .mx_RoomSearch:active,
body[class*="light"] .mx_RoomSearch:active {
  background-color: rgba(0, 0, 0, 0.08) !important;
  transform: scale(0.99) !important;
}

/* --- DARK THEME --- */
body.cpd-theme-dark:not([class*="light"]) .mx_RoomSearch,
body.theme-dark:not([class*="light"]) .mx_RoomSearch,
body:not([class*="light"]) .mx_RoomSearch,
body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch,
body.theme-dark:not([class*="light"]) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch,
body:not([class*="light"]) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText,
body.theme-dark:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText,
body:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText {
  color: var(--cpd-color-text-secondary, #94a3b8) !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_icon,
body.theme-dark:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_icon,
body:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_icon {
  background-color: var(--cpd-color-icon-secondary, #94a3b8) !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_shortcutPrompt,
body.theme-dark:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_shortcutPrompt,
body:not([class*="light"]) .mx_RoomSearch .mx_RoomSearch_shortcutPrompt {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--cpd-color-text-secondary, #94a3b8) !important;
}

/* Dark Theme: Hover */
body.cpd-theme-dark .mx_RoomSearch:hover,
body.theme-dark .mx_RoomSearch:hover,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:hover,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:hover {
  background-color: #18191c !important;
  border-color: #3f3f46 !important;
}

body.cpd-theme-dark .mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText,
body.theme-dark .mx_RoomSearch:hover .mx_RoomSearch_spotlightTriggerText {
  color: var(--cpd-color-text-primary, #ffffff) !important;
}

body.cpd-theme-dark .mx_RoomSearch:hover .mx_RoomSearch_icon,
body.theme-dark .mx_RoomSearch:hover .mx_RoomSearch_icon {
  background-color: var(--cpd-color-icon-primary, #ffffff) !important;
}

body.cpd-theme-dark .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt,
body.theme-dark .mx_RoomSearch:hover .mx_RoomSearch_shortcutPrompt {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Dark Theme: Focus & Focus-Visible (Emerald Ring) */
body.cpd-theme-dark .mx_RoomSearch:focus,
body.theme-dark .mx_RoomSearch:focus,
body.cpd-theme-dark .mx_RoomSearch:focus-visible,
body.theme-dark .mx_RoomSearch:focus-visible,
body.cpd-theme-dark .mx_RoomSearch:focus-within,
body.theme-dark .mx_RoomSearch:focus-within,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-within,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-within {
  background-color: #131417 !important;
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.cpd-theme-dark .mx_RoomSearch:focus-within .mx_RoomSearch_spotlightTriggerText,
body.theme-dark .mx_RoomSearch:focus-within .mx_RoomSearch_spotlightTriggerText {
  color: var(--cpd-color-text-primary, #ffffff) !important;
}

body.cpd-theme-dark .mx_RoomSearch:focus-within .mx_RoomSearch_icon,
body.theme-dark .mx_RoomSearch:focus-within .mx_RoomSearch_icon {
  background-color: #10b981 !important;
}

/* Dark Theme: Active */
body.cpd-theme-dark .mx_RoomSearch:active,
body.theme-dark .mx_RoomSearch:active {
  background-color: #16171a !important;
  transform: scale(0.99) !important;
}

/* Minimized Sidebar Variant */
.mx_LeftPanel.mx_LeftPanel_minimized .mx_LeftPanel_filterContainer {
  margin: 4px auto 2px auto !important;
  padding: 0 0 6px 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.mx_RoomSearch.mx_RoomSearch_minimized {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.mx_RoomSearch.mx_RoomSearch_minimized .mx_RoomSearch_icon {
  margin: 0 !important;
}

/* Mobile & Touch Responsive Adaptations */
@media (max-width: 767.98px) {
  .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
    margin: 6px 12px 4px 12px !important;
    gap: 8px !important;
  }

  .mx_RoomSearch,
  .mx_SearchBox,
  .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch,
  .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_SearchBox {
    height: 36px !important;
    min-height: 36px !important;
  }

  /* Hide desktop keyboard shortcut on touch devices */
  .mx_RoomSearch .mx_RoomSearch_shortcutPrompt {
    display: none !important;
  }

  .mx_RoomSearch .mx_RoomSearch_spotlightTriggerText {
    font-size: 14px !important;
  }
}

/* Sidebar action buttons next to search bar (Explore button is hidden) */
.mx_LeftPanel_exploreButton,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton {
  display: none !important;
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:before,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:before,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:before,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:before,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:before,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:before {
  background-color: var(--cpd-color-icon-secondary, #64748b) !important;
}

body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}

body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover:before,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover:before,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover:before,
body.cpd-theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover:before,
body.theme-light .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover:before,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover:before {
  background-color: var(--cpd-color-icon-primary, #0f172a) !important;
}

body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
}

body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:before,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:before,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:before,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:before {
  background-color: var(--cpd-color-icon-secondary, #94a3b8) !important;
}

body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover {
  background-color: #18191c !important;
  border-color: #3f3f46 !important;
}

body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover:before,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton:hover:before,
body.cpd-theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover:before,
body.theme-dark .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_dialPadButton:hover:before {
  background-color: var(--cpd-color-icon-primary, #ffffff) !important;
}

/* Room list scroll wrapper */
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyTop,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper.mx_LeftPanel_roomListWrapper_stickyBottom {
  margin-top: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.mx_RoomSublist {
  margin: 0 !important;
  margin-bottom: 2px !important;
  position: relative !important;
  width: 100% !important;
}

/* Section headers (Favorites, People, Rooms) and vertical column alignment */
.mx_RoomSublist .mx_RoomSublist_headerContainer {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px 0 12px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* Empty state indication when there are no rooms or direct chats */
.sc-sublist-empty {
  padding: 4px 12px 6px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cpd-color-text-secondary, #94a3b8) !important;
  opacity: 0.72 !important;
  user-select: none !important;
  pointer-events: none !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

body.cpd-theme-light .sc-sublist-empty,
body.theme-light .sc-sublist-empty {
  color: #64748b !important;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickableContainer {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  position: static !important;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_stickyTop,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_stickyBottom {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText,
.mx_RoomSublist_headerText {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--cpd-color-text-secondary, #9fa6b2) !important;
}

/* Badge container (unread messages counter): sits before action buttons */
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: 6px !important;
  order: 7 !important;
}

/* Sublist menu button (...) */
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
  flex: 0 0 auto !important;
  order: 8 !important;
  margin: 0 4px 0 0 !important;
}

/* The '+' Add icon button: Pinned to exact same right offset in sidebar column */
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  margin-left: auto !important;
  order: 9 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease !important;
}

/* When badgeContainer is present, ensure auxButton remains firmly pinned on the far right */
.mx_RoomSublist .mx_RoomSublist_headerContainer:has(.mx_RoomSublist_badgeContainer) .mx_RoomSublist_auxButton {
  margin-left: 2px !important;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-light .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover,
body.cpd-theme-light .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}


/* Room tiles */
.mx_RoomTile {
  border-radius: 8px !important;
  margin: 1px 4px !important;
  padding: 6px 10px !important;
  transition: background-color 0.12s ease !important;
}

.mx_RoomTile_name {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.mx_RoomTile_messagePreview {
  font-size: 13.5px !important;
}

body.cpd-theme-light .mx_RoomTile:hover,
body.theme-light .mx_RoomTile:hover,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_RoomTile:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

body.cpd-theme-light .mx_RoomTile.mx_RoomTile_selected,
body.theme-light .mx_RoomTile.mx_RoomTile_selected,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_RoomTile.mx_RoomTile_selected {
  background-color: rgba(16, 185, 129, 0.12) !important;
}

body.cpd-theme-dark .mx_RoomTile:hover,
body.theme-dark .mx_RoomTile:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.cpd-theme-dark .mx_RoomTile.mx_RoomTile_selected,
body.theme-dark .mx_RoomTile.mx_RoomTile_selected {
  background-color: rgba(16, 185, 129, 0.16) !important;
}

/* 2. PROFILE BAR DOCKED AT THE BOTTOM (like Slack / Discord / Linear) */
.mx_SpacePanel {
  order: 2 !important;
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: none !important;
  flex: 0 0 56px !important;
  overflow: visible !important;
  z-index: 10 !important;
}

body.cpd-theme-light .mx_SpacePanel,
body.theme-light .mx_SpacePanel,
body[class*="light"] .mx_SpacePanel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_SpacePanel,
body.theme-dark:not([class*="light"]) .mx_SpacePanel,
body:not([class*="light"]) .mx_SpacePanel {
  background: #111215 !important;
  background-color: #111215 !important;
  border-top: 1px solid #27272a !important;
}

/* User profile button inside SpacePanel footer */
.mx_SpacePanel .mx_UserMenu {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 42px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* User avatar - NO GREEN BORDER, and initial letter perfectly centered */
.mx_SpacePanel .mx_UserMenu_userAvatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_SpacePanel .mx_UserMenu_userAvatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: none !important;
  border: none !important;
}

/* Center initial letter inside avatar */
.mx_SpacePanel .mx_UserMenu_userAvatar .mx_BaseAvatar,
.mx_SpacePanel .mx_UserMenu_userAvatar .mx_UserMenu_userAvatar_BaseAvatar,
.mx_SpacePanel .mx_UserMenu_userAvatar [class*="_avatar_"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.mx_SpacePanel .mx_UserMenu_userAvatar [class*="_avatar_"] > span,
.mx_SpacePanel .mx_UserMenu_userAvatar .mx_BaseAvatar > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 auto !important;
}

.mx_SpacePanel .mx_UserMenu_name,
.mx_UserMenu_name {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--cpd-color-text-primary, #ffffff) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 18px !important;
  margin: 0 0 0 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Subtle upward chevron indicator indicating menu pops upward */
.mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton::after {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 8px !important;
  margin-right: 2px !important;
  background-color: var(--cpd-color-icon-tertiary, #8d97a5) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.47 9.53a.75.75 0 0 0 1.06 0L8 7.06l2.47 2.47a.75.75 0 1 0 1.06-1.06l-3-3a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 0 0 0 1.06z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.47 9.53a.75.75 0 0 0 1.06 0L8 7.06l2.47 2.47a.75.75 0 1 0 1.06-1.06l-3-3a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 0 0 0 1.06z'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  flex-shrink: 0 !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s ease !important;
}

.mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton:hover::after {
  opacity: 1 !important;
}

/* Hide clutter from SpacePanel */
.mx_SpacePanel_toggleCollapse,
.mx_SpacePanel .mx_SpacePanel_toggleCollapse,
.mx_SpacePanel [data-rbd-droppable-id="top-level-spaces"],
.mx_SpacePanel .mx_SpaceTreeLevel,
.mx_SpacePanel .mx_SpaceItem,
.mx_SpacePanel .mx_SpaceButton_new,
.mx_SpacePanel .mx_SpaceButton_home,
.mx_SpacePanel .mx_ThreadsActivityCentre_container,
.mx_SpacePanel .mx_QuickSettingsButton {
  display: none !important;
}

/* UserMenu context menu popup opens UPWARD above the bottom profile dock as a single card */
.sc-user-menu-wrapper,
.mx_ContextualMenu_wrapper:has(.mx_UserMenu_contextMenu) {
  position: fixed !important;
  top: auto !important;
  bottom: 60px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 1000 !important;
}

.sc-user-menu-wrapper .mx_ContextualMenu,
.mx_ContextualMenu_wrapper:has(.mx_UserMenu_contextMenu) .mx_ContextualMenu {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  border-radius: 12px !important;
}

.sc-user-menu-wrapper .mx_UserMenu_contextMenu,
.mx_ContextualMenu_wrapper:has(.mx_UserMenu_contextMenu) .mx_UserMenu_contextMenu,
.mx_UserMenu_contextMenu {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Mobile responsive states */
@media (max-width: 767.98px) {
  body.sc-in-room .mx_LeftPanel_outerWrapper {
    display: none !important;
  }
  body.sc-in-room-list .mx_LeftPanel_outerWrapper {
    display: flex !important;
    width: 100vw !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding-top: 0 !important;
  }
  body.sc-in-room-list .mx_SpacePanel {
    width: 100% !important;
  }
}

/* ==========================================================================
   SecureChat Branding & Logo Enforcement
   ========================================================================== */

/* Replace any residual Element/Matrix home/splash background logos with SecureChat shield */
.mx_HomePage_logo,
.mx_SplashTemplate_logo {
  background-image: url("/themes/element/img/logos/element-logo.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ==========================================================================
   Aggressive Elimination & Shielding of Legacy Element/Matrix Auth, Login & Welcome
   ========================================================================== */

/* Completely hide and eliminate any legacy Element/Matrix auth containers, login forms, and welcome screens */
.mx_AuthPage:not(:has(.mx_CompleteSecurity)):not(:has(.mx_SetupEncryptionDialog)):not(:has(.mx_CompleteSecurityBody)),
.mx_AuthPage_modal:not(:has(.mx_CompleteSecurity)):not(:has(.mx_SetupEncryptionDialog)):not(:has(.mx_CompleteSecurityBody)),
.mx_AuthBody,
.mx_Login,
.mx_Login_form,
.mx_Login_type_sso,
.mx_Login_type_password,
.mx_Login_submit,
.mx_Login_loader,
.mx_Login_server,
.mx_Login_actions,
.mx_ServerPicker,
.mx_SSOButtons,
.mx_InteractiveAuthEntry,
.mx_Registration,
.mx_PasswordLogin,
.mx_Welcome,
.mx_WelcomePage,
.mx_Welcome_body,
.mx_Welcome_page,
.mx_LoginSplashView,
.mx_LoginSplashView_splashButtons,
[data-testid="login-page"],
[data-testid="login-form"],
[data-testid="welcome-page"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-width: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  z-index: -9999 !important;
}

/* Modern SecureChat Security Setup Modal */
.mx_AuthPage:has(.mx_CompleteSecurity),
.mx_AuthPage:has(.mx_SetupEncryptionDialog),
.mx_AuthPage:has(.mx_CompleteSecurityBody) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 1000 !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #111215 !important;
  overflow: auto !important;
}

body.theme-light .mx_AuthPage:has(.mx_CompleteSecurity),
body.theme-light .mx_AuthPage:has(.mx_SetupEncryptionDialog),
body.theme-light .mx_AuthPage:has(.mx_CompleteSecurityBody),
body.cpd-theme-light .mx_AuthPage:has(.mx_CompleteSecurity),
body.cpd-theme-light .mx_AuthPage:has(.mx_SetupEncryptionDialog),
body.cpd-theme-light .mx_AuthPage:has(.mx_CompleteSecurityBody) {
  background-color: #ffffff !important;
}

/* Modern SecureChat Security Setup & Device Verification Modal */
.mx_AuthPage:has(.mx_CompleteSecurity) .mx_AuthPage_modal,
.mx_AuthPage:has(.mx_SetupEncryptionDialog) .mx_AuthPage_modal,
.mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modal,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow),
.mx_Dialog:has(.mx_SetupEncryptionBody_reset),
.mx_Dialog:has(.mx_VerificationShowSas),
.mx_Dialog:has(.mx_VerificationPanel) {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: min(460px, calc(100vw - 32px)) !important;
  max-width: 460px !important;
  min-width: 320px !important;
  height: auto !important;
  max-height: 90vh !important;
  padding: 24px !important;
  background: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
  box-sizing: border-box !important;
  z-index: 1001 !important;
}

.mx_Dialog_border:has(.mx_VerificationShowSas),
.mx_Dialog_border:has(.mx_VerificationPanel) {
  height: auto !important;
  max-height: 90vh !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

body.theme-light .mx_AuthPage:has(.mx_CompleteSecurity) .mx_AuthPage_modal,
body.theme-light .mx_AuthPage:has(.mx_SetupEncryptionDialog) .mx_AuthPage_modal,
body.theme-light .mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modal,
body.cpd-theme-light .mx_AuthPage:has(.mx_CompleteSecurity) .mx_AuthPage_modal,
body.cpd-theme-light .mx_AuthPage:has(.mx_SetupEncryptionDialog) .mx_AuthPage_modal,
body.cpd-theme-light .mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modal,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow),
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow),
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset),
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset),
body.theme-light .mx_Dialog:has(.mx_VerificationShowSas),
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationShowSas),
body.theme-light .mx_Dialog:has(.mx_VerificationPanel),
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationPanel) {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

.mx_AuthPage:has(.mx_CompleteSecurity) .mx_AuthPage_modalBlur,
.mx_AuthPage:has(.mx_SetupEncryptionDialog) .mx_AuthPage_modalBlur {
  display: none !important;
}

.mx_AuthPage:has(.mx_CompleteSecurity) .mx_AuthPage_modalContent,
.mx_AuthPage:has(.mx_SetupEncryptionDialog) .mx_AuthPage_modalContent {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

/* Eliminate nested card boxes in CompleteSecurity */
.mx_CompleteSecurity,
.mx_CompleteSecurityBody {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* BaseDialog content reset for Verification Dialogs */
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_fixedWidth,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_fixedWidth,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_fixedWidth,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_fixedWidth {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  flex: none !important;
}

.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_content,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_content {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  flex: none !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_Dialog:has(.mx_VerificationShowSas) .mx_EncryptionPanel,
.mx_Dialog:has(.mx_VerificationPanel) .mx_EncryptionPanel,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_VerificationPanel,
.mx_Dialog:has(.mx_VerificationPanel) .mx_VerificationPanel {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.mx_Dialog:has(.mx_VerificationShowSas) .mx_UserInfo_container,
.mx_Dialog:has(.mx_VerificationPanel) .mx_UserInfo_container,
.mx_Dialog .mx_VerificationPanel .mx_UserInfo_container,
.mx_Dialog .mx_VerificationPanel_verified_section,
.mx_Dialog .mx_VerificationPanel_reciprocate_section,
.mx_VerificationPanel_verified_section,
.mx_VerificationPanel_reciprocate_section {
  padding: 20px 24px 24px 24px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_header,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_header,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_header,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_header,
.mx_Dialog:has(.mx_VerificationRequestDialog) .mx_Dialog_header,
.mx_Dialog:has(.mx_SetupEncryptionDialog) .mx_Dialog_header,
.mx_Dialog:has([class*="Verification"]) .mx_Dialog_header,
.mx_Dialog:has([class*="CompleteSecurity"]) .mx_Dialog_header {
  padding: 20px 24px 16px 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  min-height: 58px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_header,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_header,
body.theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_header,
body.theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_header,
body.theme-light .mx_Dialog:has(.mx_VerificationRequestDialog) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationRequestDialog) .mx_Dialog_header,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionDialog) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionDialog) .mx_Dialog_header,
body.theme-light .mx_Dialog:has([class*="Verification"]) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has([class*="Verification"]) .mx_Dialog_header,
body.theme-light .mx_Dialog:has([class*="CompleteSecurity"]) .mx_Dialog_header,
body.cpd-theme-light .mx_Dialog:has([class*="CompleteSecurity"]) .mx_Dialog_header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_title,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_title,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_title,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_title,
.mx_Dialog:has(.mx_VerificationRequestDialog) .mx_Dialog_title,
.mx_Dialog:has(.mx_SetupEncryptionDialog) .mx_Dialog_title,
.mx_Dialog:has([class*="Verification"]) .mx_Dialog_title,
.mx_Dialog:has([class*="CompleteSecurity"]) .mx_Dialog_title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 44px 0 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_title,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_title,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_title,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_title,
body.theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_title,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_title,
body.theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_title,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_title {
  color: #0f172a !important;
}

.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_titleImage,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_titleImage,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_titleImage,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_titleImage {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  padding: 6px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(61%) sepia(77%) saturate(464%) hue-rotate(115deg) brightness(94%) contrast(88%) !important;
}

body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_titleImage,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_titleImage,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_titleImage,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_titleImage,
body.theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_titleImage,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_titleImage,
body.theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_titleImage,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_titleImage {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  filter: brightness(0) saturate(100%) invert(48%) sepia(85%) saturate(497%) hue-rotate(120deg) brightness(90%) contrast(86%) !important;
}

/* CompleteSecurity modal header & controls layout */
.mx_CompleteSecurity_header {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 44px 0 0 !important;
  margin: 0 0 16px 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_CompleteSecurity_header,
body.cpd-theme-light .mx_CompleteSecurity_header {
  color: #0f172a !important;
}

/* Clean, modern shield icon badge in header replacing red warning badge */
.mx_CompleteSecurity_headerIcon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

body.theme-light .mx_CompleteSecurity_headerIcon,
body.cpd-theme-light .mx_CompleteSecurity_headerIcon {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
}

.mx_CompleteSecurity_headerIcon::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: #10b981 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Close buttons (pinned neatly to top-right corner of card) */
.mx_CompleteSecurity_skip,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_cancelButton,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_cancelButton,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_cancelButton,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_cancelButton,
.mx_Dialog:has(.mx_VerificationRequestDialog) .mx_Dialog_cancelButton,
.mx_Dialog:has(.mx_SetupEncryptionDialog) .mx_Dialog_cancelButton,
.mx_Dialog:has([class*="Verification"]) .mx_Dialog_cancelButton,
.mx_Dialog:has([class*="CompleteSecurity"]) .mx_Dialog_cancelButton {
  position: absolute !important;
  top: 13px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

body.theme-light .mx_CompleteSecurity_skip,
body.cpd-theme-light .mx_CompleteSecurity_skip,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_cancelButton,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_cancelButton,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_cancelButton,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_cancelButton,
body.theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_cancelButton,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_cancelButton,
body.theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_cancelButton,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_cancelButton {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mx_CompleteSecurity_skip:hover,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_cancelButton:hover,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_cancelButton:hover,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_cancelButton:hover,
.mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_cancelButton:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  transform: scale(1.05);
}

body.theme-light .mx_CompleteSecurity_skip:hover,
body.cpd-theme-light .mx_CompleteSecurity_skip:hover,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_cancelButton:hover,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_Dialog_cancelButton:hover,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_cancelButton:hover,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) .mx_Dialog_cancelButton:hover,
body.theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_cancelButton:hover,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationShowSas) .mx_Dialog_cancelButton:hover,
body.theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_cancelButton:hover,
body.cpd-theme-light .mx_Dialog:has(.mx_VerificationPanel) .mx_Dialog_cancelButton:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.mx_CompleteSecurity_skip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--cpd-color-icon-secondary, #a1a1aa) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") no-repeat center center / 16px 16px !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") no-repeat center center / 16px 16px !important;
  transition: background-color 0.15s ease !important;
}

.mx_CompleteSecurity_skip:hover::before {
  background-color: var(--cpd-color-icon-primary, #ffffff) !important;
}

body.theme-light .mx_CompleteSecurity_skip::before,
body.cpd-theme-light .mx_CompleteSecurity_skip::before {
  background-color: var(--cpd-color-icon-secondary, #52525b) !important;
}

body.theme-light .mx_CompleteSecurity_skip:hover::before,
body.cpd-theme-light .mx_CompleteSecurity_skip:hover::before {
  background-color: var(--cpd-color-icon-primary, #18181b) !important;
}

/* Modal body & description text */
.mx_CompleteSecurity_body,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) [role="dialog"] > div:not(.mx_Dialog_header):not(.mx_Dialog_cancelButton),
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) [role="dialog"] > div:not(.mx_Dialog_header):not(.mx_Dialog_cancelButton) {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px 24px 24px 24px !important;
}

.mx_CompleteSecurity_body p,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) p,
.mx_Dialog:has(.mx_SetupEncryptionBody_reset) p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #a1a1aa !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

body.theme-light .mx_CompleteSecurity_body p,
body.cpd-theme-light .mx_CompleteSecurity_body p,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) p,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) p,
body.theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) p,
body.cpd-theme-light .mx_Dialog:has(.mx_SetupEncryptionBody_reset) p {
  color: #64748b !important;
}

/* Device Verification Success Modal Section */
.mx_VerificationPanel_verified_section,
.mx_Dialog .mx_VerificationPanel_verified_section {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 20px 24px 24px 24px !important;
  box-sizing: border-box !important;
}

.mx_VerificationPanel_verified_section > p,
.mx_Dialog .mx_VerificationPanel_verified_section > p {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: #f4f4f5 !important;
  text-align: left !important;
}

body.theme-light .mx_VerificationPanel_verified_section > p,
body.cpd-theme-light .mx_VerificationPanel_verified_section > p,
body.theme-light .mx_Dialog .mx_VerificationPanel_verified_section > p,
body.cpd-theme-light .mx_Dialog .mx_VerificationPanel_verified_section > p {
  color: #0f172a !important;
}

.mx_VerificationPanel_verified_section .mx_E2EIcon,
.mx_Dialog .mx_VerificationPanel_verified_section .mx_E2EIcon {
  margin: 16px auto 28px 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,
.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton,
.mx_Dialog .mx_VerificationPanel_verified_section .mx_UserInfo_wideButton,
.mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton {
  float: none !important;
  align-self: flex-end !important;
  margin: 0 !important;
  min-height: 40px !important;
  padding: 9px 24px !important;
  border-radius: 10px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Verification Cancelled Section Button */
.mx_Dialog .mx_VerificationPanel .mx_UserInfo_container .mx_UserInfo_wideButton,
.mx_Dialog:has(.mx_VerificationPanel) .mx_UserInfo_container .mx_UserInfo_wideButton {
  float: none !important;
  align-self: flex-end !important;
  margin: 16px 0 0 0 !important;
  min-height: 40px !important;
  padding: 9px 24px !important;
  border-radius: 10px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Verification Reciprocate Buttons */
.mx_Dialog .mx_VerificationPanel_reciprocateButtons,
.mx_VerificationPanel_reciprocateButtons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_Dialog .mx_VerificationPanel_reciprocateButtons .mx_AccessibleButton,
.mx_VerificationPanel_reciprocateButtons .mx_AccessibleButton {
  float: none !important;
  margin: 0 !important;
  min-height: 40px !important;
  padding: 9px 24px !important;
  border-radius: 10px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Action button row layout */
.mx_CompleteSecurity_actionRow,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 8px 0 16px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Action button sizing and constraints */
.mx_CompleteSecurity_actionRow .mx_AccessibleButton,
.mx_CompleteSecurity_actionRow button,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .mx_AccessibleButton {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

/* Primary Verify Button */
.mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_primary,
.mx_CompleteSecurity_actionRow button.mx_Dialog_primary,
.mx_CompleteSecurity_actionRow [data-kind="primary"],
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_primary {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_primary:hover,
.mx_CompleteSecurity_actionRow button.mx_Dialog_primary:hover,
.mx_CompleteSecurity_actionRow [data-kind="primary"]:hover,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_primary:hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_primary:active,
.mx_CompleteSecurity_actionRow button.mx_Dialog_primary:active,
.mx_CompleteSecurity_actionRow [data-kind="primary"]:active {
  background-color: #047857 !important;
  border-color: #047857 !important;
  transform: translateY(0) !important;
}

/* Secondary Skip / Start Using Button */
.mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_secondary,
.mx_CompleteSecurity_actionRow .sc-start-using-btn,
.mx_CompleteSecurity_actionRow .sc-skip-verification-btn,
.mx_CompleteSecurity_actionRow [data-kind="secondary"],
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-start-using-btn,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-skip-verification-btn {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #e4e4e7 !important;
  box-shadow: none !important;
}

.mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_secondary:hover,
.mx_CompleteSecurity_actionRow .sc-start-using-btn:hover,
.mx_CompleteSecurity_actionRow .sc-skip-verification-btn:hover,
.mx_CompleteSecurity_actionRow [data-kind="secondary"]:hover,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-start-using-btn:hover,
.mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-skip-verification-btn:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.theme-light .mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_secondary,
body.theme-light .mx_CompleteSecurity_actionRow .sc-start-using-btn,
body.theme-light .mx_CompleteSecurity_actionRow .sc-skip-verification-btn,
body.cpd-theme-light .mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_secondary,
body.cpd-theme-light .mx_CompleteSecurity_actionRow .sc-start-using-btn,
body.cpd-theme-light .mx_CompleteSecurity_actionRow .sc-skip-verification-btn,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-start-using-btn,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-skip-verification-btn,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-start-using-btn,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-skip-verification-btn {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #374151 !important;
}

body.theme-light .mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_secondary:hover,
body.theme-light .mx_CompleteSecurity_actionRow .sc-start-using-btn:hover,
body.theme-light .mx_CompleteSecurity_actionRow .sc-skip-verification-btn:hover,
body.cpd-theme-light .mx_CompleteSecurity_actionRow .mx_AccessibleButton_kind_secondary:hover,
body.cpd-theme-light .mx_CompleteSecurity_actionRow .sc-start-using-btn:hover,
body.cpd-theme-light .mx_CompleteSecurity_actionRow .sc-skip-verification-btn:hover,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-start-using-btn:hover,
body.theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-skip-verification-btn:hover,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-start-using-btn:hover,
body.cpd-theme-light .mx_Dialog:has(.mx_CompleteSecurity_actionRow) .mx_CompleteSecurity_actionRow .sc-skip-verification-btn:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

/* Reset Security Key Prompt / Footer */
.mx_SetupEncryptionBody_reset {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #a1a1aa !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.theme-light .mx_SetupEncryptionBody_reset,
body.cpd-theme-light .mx_SetupEncryptionBody_reset {
  color: #64748b !important;
}

.mx_SetupEncryptionBody_reset a,
.mx_SetupEncryptionBody_reset_link,
.mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link {
  color: #10b981 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: color 0.15s ease !important;
}

.mx_SetupEncryptionBody_reset a:hover,
.mx_SetupEncryptionBody_reset_link:hover,
.mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link:hover {
  color: #34d399 !important;
}

body.theme-light .mx_SetupEncryptionBody_reset a,
body.theme-light .mx_SetupEncryptionBody_reset_link,
body.theme-light .mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link,
body.cpd-theme-light .mx_SetupEncryptionBody_reset a,
body.cpd-theme-light .mx_SetupEncryptionBody_reset_link,
body.cpd-theme-light .mx_SetupEncryptionBody_reset .mx_SetupEncryptionBody_reset_link {
  color: #059669 !important;
}

body.theme-light .mx_SetupEncryptionBody_reset a:hover,
body.theme-light .mx_SetupEncryptionBody_reset_link:hover,
body.cpd-theme-light .mx_SetupEncryptionBody_reset a:hover,
body.cpd-theme-light .mx_SetupEncryptionBody_reset_link:hover {
  color: #047857 !important;
}


/* Aggressively hide Matrix / Element auth headers, logos, and server banners */
.mx_AuthHeader,
.mx_AuthHeaderLogo,
.mx_AuthHeader_logo,
header.mx_AuthHeader,
.mx_HeaderButtons,
[data-testid="auth-header"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Aggressively hide Matrix / Element auth footer links, external badges, and copyright notices */
.mx_AuthFooter,
.mx_Footer,
.mx_AuthFooter_link,
.mx_AuthFooter_copyright,
footer.mx_AuthFooter,
[data-testid="auth-footer"],
.mx_LeftPanel_brandBadge,
.mx_Beta_badge,
.mx_MatrixChat_badge,
.mx_RoomDirectory_badge,
.mx_ServerCard_badge,
.mx_RoomHeader_serverBadge,
.mx_MatrixServerBadge,
.mx_ServerNotice,
.mx_ServerNotice_dialog,
.mx_MatrixClientPeg_nags,
.mx_Legal,
.mx_PrivacyPolicy,
.mx_HelpUserSettingsTab_copyright,
.mx_HelpUserSettingsTab_credits,
.mx_HelpUserSettingsTab_social,
.mx_HelpUserSettingsTab_links,
.mx_HelpUserSettingsTab_bugReport,
.mx_FeedbackDialog_section,
.mx_SettingsTab_help,
a[href*="element.io"],
a[href*="vector.im"],
a[href*="github.com/vector-im"],
a[href*="matrix.org"]:not([href*="matrix.chongluadao.vn"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* SecureChat Pill styling & Matrix icon elimination */
.mx_Pill .mx_Pill_icon[src*="matrix"],
.mx_Pill .mx_Pill_icon[src*="element"],
a[href*="matrix.to"] img[src*="matrix"] {
  display: none !important;
}

body.theme-dark .mx_Pill,
body.cpd-theme-dark .mx_Pill {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 6px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

body.theme-dark .mx_Pill:hover,
body.cpd-theme-dark .mx_Pill:hover {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border-color: #10b981 !important;
}

body.theme-dark .mx_Pill.mx_Pill--me,
body.cpd-theme-dark .mx_Pill.mx_Pill--me {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

body.theme-light .mx_Pill,
body.cpd-theme-light .mx_Pill {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 6px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
}

body.theme-light .mx_Pill:hover,
body.cpd-theme-light .mx_Pill:hover {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #047857 !important;
}

body.theme-light .mx_Pill.mx_Pill--me,
body.cpd-theme-light .mx_Pill.mx_Pill--me {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

/* Lock background color and prevent visual flash if an unauthenticated view is rendered */
body:has(.mx_AuthPage),
body:has(.mx_Login),
body:has(.mx_WelcomePage),
html:has(.mx_AuthPage),
html:has(.mx_Login) {
  background-color: #111215 !important;
  background: #111215 !important;
  overflow: hidden !important;
}

body.theme-light:has(.mx_AuthPage),
body.theme-light:has(.mx_Login),
body.theme-light:has(.mx_WelcomePage),
html.theme-light:has(.mx_AuthPage),
html.theme-light:has(.mx_Login),
body.cpd-theme-light:has(.mx_AuthPage),
body.cpd-theme-light:has(.mx_Login),
body.cpd-theme-light:has(.mx_WelcomePage) {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Ensure left panel brand icon is properly sized */
.mx_LeftPanel_brand svg,
.mx_SpacePanel svg.mx_MatrixChat_logo {
  max-width: 28px !important;
  max-height: 28px !important;
}


/* Suppress onboarding lists and buttons */
.mx_UserOnboardingList,
.mx_UserOnboardingTask,
.mx_UserOnboardingButton {
  display: none !important;
}

/* Suppress analytics prompts and explicitly suppressed dialogs only */
.mx_AnalyticsPrompt,
.mx_AnalyticsPromptDialog,
[data-testid="analytics-prompt"],
.mx_Dialog_wrapper.sc-suppressed-dialog,
.mx_Dialog.sc-suppressed-dialog,
.mx_Dialog_wrapper:has(.mx_AnalyticsPrompt),
.mx_Dialog_wrapper:has([data-testid="analytics-prompt"]) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Suppress promotional release announcement popups cleanly */
.mx_ReleaseAnnouncementToast,
[data-testid="release-announcement-toast"],
.mx_Toast_toast:has(.mx_ReleaseAnnouncementToast),
.mx_Toast_toast:has([data-testid="release-announcement-toast"]),
[role="dialog"][class*="_content_"]:has([class*="_description_"]):not(.mx_Dialog_wrapper *):not(.mx_Dialog *) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Critical Notifications Guarantee: Ensure incoming calls and chat error dialogs/toasts are ALWAYS prominent and visible */
.mx_Toast_toast:has(.mx_IncomingCallToast),
.mx_Toast_toast:has(.mx_CallToast),
.mx_Toast_toast:has([data-testid="incoming-call-toast"]),
.mx_Toast_toast:has([data-testid*="call"]),
.mx_IncomingCallToast,
.mx_CallToast,
.mx_IncomingCallDialog,
.mx_CallDialog,
.mx_CallView,
.mx_Toast_toast:has([role="alert"]),
.mx_Toast_toast:has(.mx_ErrorMessage),
.mx_Toast_toast:has(.mx_ErrorDialog) {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10001 !important;
}

/* ==========================================================================
   Popup Toast Positioning & Premium Styling (Top-Right Corner)
   ========================================================================== */
.mx_ToastContainer {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_NonUrgentToastContainer {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
}

.mx_ToastContainer .mx_Toast_toast,
.mx_Toast,
.mx_Toast_toast {
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  border: 1px solid #27272a !important;
  background: rgba(24, 25, 28, 0.96) !important;
  color: #f4f4f5 !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 14px 16px !important;
  animation: sc-toast-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: all 0.2s ease-in-out !important;
}

@keyframes sc-toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.theme-light .mx_ToastContainer .mx_Toast_toast,
body.cpd-theme-light .mx_ToastContainer .mx_Toast_toast {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

body.theme-light .mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2,
body.cpd-theme-light .mx_ToastContainer .mx_Toast_toast .mx_Toast_title h2 {
  color: #0f172a !important;
}

.mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--cpd-color-text-secondary, #94a3b8) !important;
  margin: 4px 0 12px 0 !important;
  max-width: 100% !important;
}

body.theme-light .mx_ToastContainer .mx_Toast_toast .mx_Toast_description,
body.cpd-theme-light .mx_ToastContainer .mx_Toast_toast .mx_Toast_description {
  color: #475569 !important;
}

/* ==========================================================================
   Action & Popup Button Icon System (Notifications, Dismiss, Dialogs)
   ========================================================================== */
.mx_Toast_buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
}

.mx_Toast_buttons button,
.mx_Toast_buttons .mx_AccessibleButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

/* 1. Primary Toast Button (e.g. Turn On / Enable Notifications) */
.mx_Toast_buttons button.mx_Dialog_primary,
.mx_Toast_buttons .mx_AccessibleButton_kind_primary,
.mx_Toast_buttons button[data-kind="primary"],
.mx_Toast_buttons button[class*="primary"],
.mx_Toast_buttons button:last-child:not(:first-child) {
  background-color: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
}

.mx_Toast_buttons button.mx_Dialog_primary:hover,
.mx_Toast_buttons .mx_AccessibleButton_kind_primary:hover,
.mx_Toast_buttons button[data-kind="primary"]:hover,
.mx_Toast_buttons button[class*="primary"]:hover,
.mx_Toast_buttons button:last-child:not(:first-child):hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

.mx_Toast_buttons button.mx_Dialog_primary:active,
.mx_Toast_buttons .mx_AccessibleButton_kind_primary:active,
.mx_Toast_buttons button[data-kind="primary"]:active,
.mx_Toast_buttons button[class*="primary"]:active,
.mx_Toast_buttons button:last-child:not(:first-child):active {
  background-color: #047857 !important;
  border-color: #047857 !important;
}

/* Primary Toast Button: Right arrow icon on the right of the button text */
.mx_Toast_buttons button.mx_Dialog_primary:not(:has(svg))::before,
.mx_Toast_buttons .mx_AccessibleButton_kind_primary:not(:has(svg))::before,
.mx_Toast_buttons button[data-kind="primary"]:not(:has(svg))::before,
.mx_Toast_buttons button[class*="primary"]:not(:has(svg))::before,
.mx_Toast_buttons button:last-child:not(:first-child):not(:has(svg))::before,
.mx_Toast_buttons button:only-child:not(:has(svg))::before,
.mx_Toast_buttons .mx_AccessibleButton:only-child:not(:has(svg))::before {
  content: none !important;
  display: none !important;
}

.mx_Toast_buttons button.mx_Dialog_primary:not(:has(svg))::after,
.mx_Toast_buttons .mx_AccessibleButton_kind_primary:not(:has(svg))::after,
.mx_Toast_buttons button[data-kind="primary"]:not(:has(svg))::after,
.mx_Toast_buttons button[class*="primary"]:not(:has(svg))::after,
.mx_Toast_buttons button:last-child:not(:first-child):not(:has(svg))::after,
.mx_Toast_buttons button:only-child:not(:has(svg))::after,
.mx_Toast_buttons .mx_AccessibleButton:only-child:not(:has(svg))::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* 2. Secondary Toast Button (Dismiss / Close) */
.mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child),
.mx_Toast_buttons .mx_AccessibleButton_kind_secondary,
.mx_Toast_buttons button[data-kind="secondary"],
.mx_Toast_buttons button[class*="secondary"],
.mx_Toast_buttons button:first-child:not(:only-child) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #d1d5db !important;
}

body.theme-light .mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child),
body.cpd-theme-light .mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child),
body.theme-light .mx_Toast_buttons button[data-kind="secondary"],
body.cpd-theme-light .mx_Toast_buttons button[data-kind="secondary"] {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #374151 !important;
}

.mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child):hover,
.mx_Toast_buttons .mx_AccessibleButton_kind_secondary:hover,
.mx_Toast_buttons button[data-kind="secondary"]:hover,
.mx_Toast_buttons button[class*="secondary"]:hover,
.mx_Toast_buttons button:first-child:not(:only-child):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
}

body.theme-light .mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child):hover,
body.cpd-theme-light .mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child):hover,
body.theme-light .mx_Toast_buttons .mx_AccessibleButton_kind_secondary:hover,
body.cpd-theme-light .mx_Toast_buttons .mx_AccessibleButton_kind_secondary:hover,
body.theme-light .mx_Toast_buttons button[data-kind="secondary"]:hover,
body.cpd-theme-light .mx_Toast_buttons button[data-kind="secondary"]:hover,
body.theme-light .mx_Toast_buttons button[class*="secondary"]:hover,
body.cpd-theme-light .mx_Toast_buttons button[class*="secondary"]:hover,
body.theme-light .mx_Toast_buttons button:first-child:not(:only-child):hover,
body.cpd-theme-light .mx_Toast_buttons button:first-child:not(:only-child):hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

/* Secondary Toast Button: Dismiss / Later (Clock) Icon */
.mx_Toast_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not([class*="primary"]):not(:last-child):not(:has(svg))::before,
.mx_Toast_buttons .mx_AccessibleButton_kind_secondary:not(:has(svg))::before,
.mx_Toast_buttons button[data-kind="secondary"]:not(:has(svg))::before,
.mx_Toast_buttons button[class*="secondary"]:not(:has(svg))::before,
.mx_Toast_buttons button:first-child:not(:only-child):not(:has(svg))::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* 3. Modal & Dialog Button Icons */
.mx_Dialog_buttons button,
.mx_Dialog_buttons .mx_AccessibleButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

/* Dialog Primary Buttons (Confirm/Submit/Save): Checkmark Icon */
.mx_Dialog_buttons button.mx_Dialog_primary:not(.danger):not([class*="destructive"]):not(:has(svg))::before,
.mx_Dialog_buttons .mx_AccessibleButton_kind_primary:not(.danger):not([class*="destructive"]):not(:has(svg))::before,
.mx_Dialog_buttons button[data-kind="primary"]:not(.danger):not([class*="destructive"]):not(:has(svg))::before,
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary:not(.danger):not([class*="destructive"]):not(:has(svg))::before {
  content: "" !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Dialog Destructive / Danger Buttons (Delete/Leave): Trash / Danger Icon */
.mx_Dialog_buttons button.danger:not(:has(svg))::before,
.mx_Dialog_buttons .danger:not(:has(svg))::before,
.mx_Dialog_buttons [class*="destructive"]:not(:has(svg))::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Dialog Cancel / Secondary Buttons (Cancel/Back): Dismiss / Cross Icon */
.mx_Dialog_buttons .mx_Dialog_cancelButton:not(:has(svg))::before,
.mx_Dialog_buttons button:not(.mx_Dialog_primary):not([data-kind="primary"]):not(.danger):not([class*="destructive"]):not(:has(svg))::before,
.mx_Dialog_buttons .mx_AccessibleButton_kind_secondary:not(.danger):not([class*="destructive"]):not(:has(svg))::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / contain !important;
}


/* ==========================================================================
   Color Audit: Dark Mode Border Fixes & Theme Polish
   ========================================================================== */

/* 1. Primary Buttons (Dark Mode) */
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-primary,
body.cpd-theme-dark .cpd-button--kind-primary,
body.theme-dark .cpd-button--kind-primary,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="primary"],
body.cpd-theme-dark [class*="cpd-button"][class*="primary"],
body.theme-dark [class*="cpd-button"][class*="primary"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-button[data-kind="primary"],
body.cpd-theme-dark .cpd-button[data-kind="primary"],
body.theme-dark .cpd-button[data-kind="primary"],
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button.mx_Dialog_primary,
body.cpd-theme-dark .mx_Dialog button.mx_Dialog_primary,
body.theme-dark .mx_Dialog button.mx_Dialog_primary,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons button.mx_Dialog_primary,
body.cpd-theme-dark .mx_Dialog_buttons button.mx_Dialog_primary,
body.theme-dark .mx_Dialog_buttons button.mx_Dialog_primary,
body:not(.theme-light):not(.cpd-theme-light) input[type="submit"].mx_Dialog_primary,
body.cpd-theme-dark input[type="submit"].mx_Dialog_primary,
body.theme-dark input[type="submit"].mx_Dialog_primary,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton),
body.cpd-theme-dark .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton),
body.theme-dark .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton),
body:not(.theme-light):not(.cpd-theme-light) [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.cpd-theme-dark [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-dark [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:hover,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:hover,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:hover,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-primary:hover,
body.cpd-theme-dark .cpd-button--kind-primary:hover,
body.theme-dark .cpd-button--kind-primary:hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="primary"]:hover,
body.cpd-theme-dark [class*="cpd-button"][class*="primary"]:hover,
body.theme-dark [class*="cpd-button"][class*="primary"]:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button.mx_Dialog_primary:hover,
body.cpd-theme-dark .mx_Dialog button.mx_Dialog_primary:hover,
body.theme-dark .mx_Dialog button.mx_Dialog_primary:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons button.mx_Dialog_primary:hover,
body.cpd-theme-dark .mx_Dialog_buttons button.mx_Dialog_primary:hover,
body.theme-dark .mx_Dialog_buttons button.mx_Dialog_primary:hover,
body:not(.theme-light):not(.cpd-theme-light) input[type="submit"].mx_Dialog_primary:hover,
body.cpd-theme-dark input[type="submit"].mx_Dialog_primary:hover,
body.theme-dark input[type="submit"].mx_Dialog_primary:hover,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.cpd-theme-dark [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-dark [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_primary:active,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary:active,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary:active,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:active,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:active,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:active,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-primary:active,
body.cpd-theme-dark .cpd-button--kind-primary:active,
body.theme-dark .cpd-button--kind-primary:active,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="primary"]:active,
body.cpd-theme-dark [class*="cpd-button"][class*="primary"]:active,
body.theme-dark [class*="cpd-button"][class*="primary"]:active,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button.mx_Dialog_primary:active,
body.cpd-theme-dark .mx_Dialog button.mx_Dialog_primary:active,
body.theme-dark .mx_Dialog button.mx_Dialog_primary:active,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons button.mx_Dialog_primary:active,
body.cpd-theme-dark .mx_Dialog_buttons button.mx_Dialog_primary:active,
body.theme-dark .mx_Dialog_buttons button.mx_Dialog_primary:active,
body:not(.theme-light):not(.cpd-theme-light) input[type="submit"].mx_Dialog_primary:active,
body.cpd-theme-dark input[type="submit"].mx_Dialog_primary:active,
body.theme-dark input[type="submit"].mx_Dialog_primary:active,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.cpd-theme-dark [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-dark [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: scale(0.98) !important;
}

/* 1.1 Primary Buttons (Light Mode) */
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary,
body.cpd-theme-light .cpd-button--kind-primary,
body.theme-light .cpd-button--kind-primary,
body.cpd-theme-light [class*="cpd-button"][class*="primary"],
body.theme-light [class*="cpd-button"][class*="primary"],
body.cpd-theme-light .cpd-button[data-kind="primary"],
body.theme-light .cpd-button[data-kind="primary"],
body.cpd-theme-light .mx_Dialog button.mx_Dialog_primary,
body.theme-light .mx_Dialog button.mx_Dialog_primary,
body.cpd-theme-light .mx_Dialog_buttons button.mx_Dialog_primary,
body.theme-light .mx_Dialog_buttons button.mx_Dialog_primary,
body.cpd-theme-light input[type="submit"].mx_Dialog_primary,
body.theme-light input[type="submit"].mx_Dialog_primary,
body.cpd-theme-light .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton),
body.theme-light .mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton),
body.cpd-theme-light [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-light [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary:hover,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:hover,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:hover,
body.cpd-theme-light .cpd-button--kind-primary:hover,
body.theme-light .cpd-button--kind-primary:hover,
body.cpd-theme-light [class*="cpd-button"][class*="primary"]:hover,
body.theme-light [class*="cpd-button"][class*="primary"]:hover,
body.cpd-theme-light .mx_Dialog button.mx_Dialog_primary:hover,
body.theme-light .mx_Dialog button.mx_Dialog_primary:hover,
body.cpd-theme-light .mx_Dialog_buttons button.mx_Dialog_primary:hover,
body.theme-light .mx_Dialog_buttons button.mx_Dialog_primary:hover,
body.cpd-theme-light input[type="submit"].mx_Dialog_primary:hover,
body.theme-light input[type="submit"].mx_Dialog_primary:hover,
body.cpd-theme-light [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-light [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary:active,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary:active,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:active,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary:active,
body.cpd-theme-light .cpd-button--kind-primary:active,
body.theme-light .cpd-button--kind-primary:active,
body.cpd-theme-light [class*="cpd-button"][class*="primary"]:active,
body.theme-light [class*="cpd-button"][class*="primary"]:active,
body.cpd-theme-light .mx_Dialog button.mx_Dialog_primary:active,
body.theme-light .mx_Dialog button.mx_Dialog_primary:active,
body.cpd-theme-light .mx_Dialog_buttons button.mx_Dialog_primary:active,
body.theme-light .mx_Dialog_buttons button.mx_Dialog_primary:active,
body.cpd-theme-light input[type="submit"].mx_Dialog_primary:active,
body.theme-light input[type="submit"].mx_Dialog_primary:active,
body.cpd-theme-light [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-light [data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: scale(0.98) !important;
}

/* 2. Primary Outline Buttons */
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.cpd-theme-dark [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-dark [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  border: 1px solid rgba(16, 185, 129, 0.6) !important;
  color: #10b981 !important;
  background-color: transparent !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:hover,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:hover,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:hover,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.cpd-theme-dark [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-dark [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-color: #10b981 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:active,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:active,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:active,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.cpd-theme-dark [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-dark [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: rgba(16, 185, 129, 0.22) !important;
  border-color: #10b981 !important;
  transform: scale(0.98) !important;
}

body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_icon_primary_outline,
body.cpd-theme-light [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-light [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  border: 1px solid #10b981 !important;
  color: #059669 !important;
  background-color: transparent !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:hover,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:hover,
body.cpd-theme-light [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-light [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: rgba(16, 185, 129, 0.08) !important;
  border-color: #059669 !important;
  color: #047857 !important;
}

body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:active,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_primary_outline:active,
body.cpd-theme-light [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-light [data-kind="primary_outline"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: rgba(16, 185, 129, 0.16) !important;
  border-color: #047857 !important;
  transform: scale(0.98) !important;
}

/* 3. Secondary & Dialog Buttons (Dark Mode) */
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton),
body.cpd-theme-dark .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton),
body.theme-dark .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton),
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning),
body.cpd-theme-dark .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning),
body.theme-dark .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning),
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-secondary,
body.cpd-theme-dark .cpd-button--kind-secondary,
body.theme-dark .cpd-button--kind-secondary,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="secondary"],
body.cpd-theme-dark [class*="cpd-button"][class*="secondary"],
body.theme-dark [class*="cpd-button"][class*="secondary"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-button[data-kind="secondary"],
body.cpd-theme-dark .cpd-button[data-kind="secondary"],
body.theme-dark .cpd-button[data-kind="secondary"],
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.cpd-theme-dark [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-dark [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid #27272a !important;
  color: var(--cpd-color-text-primary, #f1f5f9) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):hover,
body.cpd-theme-dark .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):hover,
body.theme-dark .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):hover,
body.cpd-theme-dark .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):hover,
body.theme-dark .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):hover,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-secondary:hover,
body.cpd-theme-dark .cpd-button--kind-secondary:hover,
body.theme-dark .cpd-button--kind-secondary:hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="secondary"]:hover,
body.cpd-theme-dark [class*="cpd-button"][class*="secondary"]:hover,
body.theme-dark [class*="cpd-button"][class*="secondary"]:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:hover,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:hover,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:hover,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.cpd-theme-dark [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-dark [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):active,
body.cpd-theme-dark .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):active,
body.theme-dark .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):active,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):active,
body.cpd-theme-dark .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):active,
body.theme-dark .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):active,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-secondary:active,
body.cpd-theme-dark .cpd-button--kind-secondary:active,
body.theme-dark .cpd-button--kind-secondary:active,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="secondary"]:active,
body.cpd-theme-dark [class*="cpd-button"][class*="secondary"]:active,
body.theme-dark [class*="cpd-button"][class*="secondary"]:active,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:active,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:active,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:active,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.cpd-theme-dark [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-dark [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #ffffff !important;
  transform: scale(0.98) !important;
}

/* 3.1 Secondary & Dialog Buttons (Light Mode) */
body.cpd-theme-light .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton),
body.theme-light .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton),
body.cpd-theme-light .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning),
body.theme-light .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning),
body.cpd-theme-light .cpd-button--kind-secondary,
body.theme-light .cpd-button--kind-secondary,
body.cpd-theme-light [class*="cpd-button"][class*="secondary"],
body.theme-light [class*="cpd-button"][class*="secondary"],
body.cpd-theme-light .cpd-button[data-kind="secondary"],
body.theme-light .cpd-button[data-kind="secondary"],
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_secondary,
body.cpd-theme-light [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-light [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #18181b !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-light .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):hover,
body.theme-light .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):hover,
body.cpd-theme-light .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):hover,
body.theme-light .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):hover,
body.cpd-theme-light .cpd-button--kind-secondary:hover,
body.theme-light .cpd-button--kind-secondary:hover,
body.cpd-theme-light [class*="cpd-button"][class*="secondary"]:hover,
body.theme-light [class*="cpd-button"][class*="secondary"]:hover,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:hover,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:hover,
body.cpd-theme-light [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-light [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: #f4f4f5 !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  color: #09090b !important;
}

body.cpd-theme-light .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):active,
body.theme-light .mx_Dialog button:not(.mx_Dialog_primary):not(.danger):not(.warning):not(.mx_Dialog_nonDialogButton):active,
body.cpd-theme-light .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):active,
body.theme-light .mx_Dialog_buttons button:not(.mx_Dialog_primary):not(.danger):not(.warning):active,
body.cpd-theme-light .cpd-button--kind-secondary:active,
body.theme-light .cpd-button--kind-secondary:active,
body.cpd-theme-light [class*="cpd-button"][class*="secondary"]:active,
body.theme-light [class*="cpd-button"][class*="secondary"]:active,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:active,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_secondary:active,
body.cpd-theme-light [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-light [data-kind="secondary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: #e4e4e7 !important;
  border-color: #10b981 !important;
  color: #09090b !important;
  transform: scale(0.98) !important;
}

/* 3.2 Destructive / Danger Buttons (Dark & Light) */
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_danger,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_danger,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_danger,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_destructive,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_destructive,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_destructive,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-destructive,
body.cpd-theme-dark .cpd-button--kind-destructive,
body.theme-dark .cpd-button--kind-destructive,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="destructive"],
body.cpd-theme-dark [class*="cpd-button"][class*="destructive"],
body.theme-dark [class*="cpd-button"][class*="destructive"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-button[data-kind="destructive"],
body.cpd-theme-dark .cpd-button[data-kind="destructive"],
body.theme-dark .cpd-button[data-kind="destructive"],
body:not(.theme-light):not(.cpd-theme-light) [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.cpd-theme-dark [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-dark [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_danger,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_danger,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_destructive,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_destructive,
body.cpd-theme-light .cpd-button--kind-destructive,
body.theme-light .cpd-button--kind-destructive,
body.cpd-theme-light [class*="cpd-button"][class*="destructive"],
body.theme-light [class*="cpd-button"][class*="destructive"],
body.cpd-theme-light .cpd-button[data-kind="destructive"],
body.theme-light .cpd-button[data-kind="destructive"],
body.cpd-theme-light [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-light [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: #ef4444 !important;
  border: 1px solid #ef4444 !important;
  color: #ffffff !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_danger:hover,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_danger:hover,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_danger:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:hover,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:hover,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:hover,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-destructive:hover,
body.cpd-theme-dark .cpd-button--kind-destructive:hover,
body.theme-dark .cpd-button--kind-destructive:hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="destructive"]:hover,
body.cpd-theme-dark [class*="cpd-button"][class*="destructive"]:hover,
body.theme-dark [class*="cpd-button"][class*="destructive"]:hover,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.cpd-theme-dark [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-dark [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_danger:hover,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_danger:hover,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:hover,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:hover,
body.cpd-theme-light .cpd-button--kind-destructive:hover,
body.theme-light .cpd-button--kind-destructive:hover,
body.cpd-theme-light [class*="cpd-button"][class*="destructive"]:hover,
body.theme-light [class*="cpd-button"][class*="destructive"]:hover,
body.cpd-theme-light [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-light [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_danger:active,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_danger:active,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_danger:active,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:active,
body.cpd-theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:active,
body.theme-dark .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:active,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-destructive:active,
body.cpd-theme-dark .cpd-button--kind-destructive:active,
body.theme-dark .cpd-button--kind-destructive:active,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="destructive"]:active,
body.cpd-theme-dark [class*="cpd-button"][class*="destructive"]:active,
body.theme-dark [class*="cpd-button"][class*="destructive"]:active,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.cpd-theme-dark [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-dark [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_danger:active,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_danger:active,
body.cpd-theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:active,
body.theme-light .mx_AccessibleButton.mx_AccessibleButton_kind_destructive:active,
body.cpd-theme-light .cpd-button--kind-destructive:active,
body.theme-light .cpd-button--kind-destructive:active,
body.cpd-theme-light [class*="cpd-button"][class*="destructive"]:active,
body.theme-light [class*="cpd-button"][class*="destructive"]:active,
body.cpd-theme-light [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active,
body.theme-light [data-kind="destructive"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):active {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  transform: scale(0.98) !important;
}

/* 3.3 Tertiary / Subtle / Ghost Buttons */
body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-tertiary,
body.cpd-theme-dark .cpd-button--kind-tertiary,
body.theme-dark .cpd-button--kind-tertiary,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="tertiary"],
body.cpd-theme-dark [class*="cpd-button"][class*="tertiary"],
body.theme-dark [class*="cpd-button"][class*="tertiary"],
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="subtle"],
body.cpd-theme-dark [class*="cpd-button"][class*="subtle"],
body.theme-dark [class*="cpd-button"][class*="subtle"],
body:not(.theme-light):not(.cpd-theme-light) [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.cpd-theme-dark [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-dark [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: #a1a1aa !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .cpd-button--kind-tertiary:hover,
body.cpd-theme-dark .cpd-button--kind-tertiary:hover,
body.theme-dark .cpd-button--kind-tertiary:hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="tertiary"]:hover,
body.cpd-theme-dark [class*="cpd-button"][class*="tertiary"]:hover,
body.theme-dark [class*="cpd-button"][class*="tertiary"]:hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"][class*="subtle"]:hover,
body.cpd-theme-dark [class*="cpd-button"][class*="subtle"]:hover,
body.theme-dark [class*="cpd-button"][class*="subtle"]:hover,
body:not(.theme-light):not(.cpd-theme-light) [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.cpd-theme-dark [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-dark [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

body.cpd-theme-light .cpd-button--kind-tertiary,
body.theme-light .cpd-button--kind-tertiary,
body.cpd-theme-light [class*="cpd-button"][class*="tertiary"],
body.theme-light [class*="cpd-button"][class*="tertiary"],
body.cpd-theme-light [class*="cpd-button"][class*="subtle"],
body.theme-light [class*="cpd-button"][class*="subtle"],
body.cpd-theme-light [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
body.theme-light [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: #52525b !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-light .cpd-button--kind-tertiary:hover,
body.theme-light .cpd-button--kind-tertiary:hover,
body.cpd-theme-light [class*="cpd-button"][class*="tertiary"]:hover,
body.theme-light [class*="cpd-button"][class*="tertiary"]:hover,
body.cpd-theme-light [class*="cpd-button"][class*="subtle"]:hover,
body.theme-light [class*="cpd-button"][class*="subtle"]:hover,
body.cpd-theme-light [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover,
body.theme-light [data-kind="tertiary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *):hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #09090b !important;
}

/* 3.4 Focus Visible: Suppress Raw Browser Outlines & Provide Emerald Focus Ring */
button,
.cpd-button,
[class*="cpd-button"],
.cpd-icon-button,
[class*="cpd-icon-button"],
.mx_AccessibleButton,
[role="button"] {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

button:focus:not(:focus-visible),
.cpd-button:focus:not(:focus-visible),
[class*="cpd-button"]:focus:not(:focus-visible),
.mx_AccessibleButton:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton:not(.mx_RoomSearch):focus-visible,
body.cpd-theme-dark .mx_AccessibleButton:not(.mx_RoomSearch):focus-visible,
body.theme-dark .mx_AccessibleButton:not(.mx_RoomSearch):focus-visible,
body:not(.theme-light):not(.cpd-theme-light) button:focus-visible,
body.cpd-theme-dark button:focus-visible,
body.theme-dark button:focus-visible,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button:focus-visible,
body.cpd-theme-dark .cpd-button:focus-visible,
body.theme-dark .cpd-button:focus-visible,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"]:focus-visible,
body.cpd-theme-dark [class*="cpd-button"]:focus-visible,
body.theme-dark [class*="cpd-button"]:focus-visible,
body:not(.theme-light):not(.cpd-theme-light) [role="button"]:not(.mx_RoomSearch):focus-visible,
body.cpd-theme-dark [role="button"]:not(.mx_RoomSearch):focus-visible,
body.theme-dark [role="button"]:not(.mx_RoomSearch):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45) !important;
}

body.cpd-theme-light .mx_AccessibleButton:not(.mx_RoomSearch):focus-visible,
body.theme-light .mx_AccessibleButton:not(.mx_RoomSearch):focus-visible,
body.cpd-theme-light button:focus-visible,
body.theme-light button:focus-visible,
body.cpd-theme-light .cpd-button:focus-visible,
body.theme-light .cpd-button:focus-visible,
body.cpd-theme-light [class*="cpd-button"]:focus-visible,
body.theme-light [class*="cpd-button"]:focus-visible,
body.cpd-theme-light [role="button"]:not(.mx_RoomSearch):focus-visible,
body.theme-light [role="button"]:not(.mx_RoomSearch):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35) !important;
}

/* 4. Disabled buttons across dark and light themes */
body:not(.theme-light):not(.cpd-theme-light) button:disabled,
body.cpd-theme-dark button:disabled,
body.theme-dark button:disabled,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button:disabled,
body.cpd-theme-dark .cpd-button:disabled,
body.theme-dark .cpd-button:disabled,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-button"]:disabled,
body.cpd-theme-dark [class*="cpd-button"]:disabled,
body.theme-dark [class*="cpd-button"]:disabled,
body:not(.theme-light):not(.cpd-theme-light) .cpd-button[aria-disabled="true"],
body.cpd-theme-dark .cpd-button[aria-disabled="true"],
body.theme-dark .cpd-button[aria-disabled="true"],
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton_disabled,
body.cpd-theme-dark .mx_AccessibleButton_disabled,
body.theme-dark .mx_AccessibleButton_disabled,
body:not(.theme-light):not(.cpd-theme-light) .mx_AccessibleButton[aria-disabled="true"],
body.cpd-theme-dark .mx_AccessibleButton[aria-disabled="true"],
body.theme-dark .mx_AccessibleButton[aria-disabled="true"],
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_buttons input[type="submit"]:disabled,
body.cpd-theme-dark .mx_Dialog_buttons input[type="submit"]:disabled,
body.theme-dark .mx_Dialog_buttons input[type="submit"]:disabled,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog button:disabled,
body.cpd-theme-dark .mx_Dialog button:disabled,
body.theme-dark .mx_Dialog button:disabled {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #27272a !important;
  color: rgba(255, 255, 255, 0.3) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

body.cpd-theme-light button:disabled,
body.theme-light button:disabled,
body.cpd-theme-light .cpd-button:disabled,
body.theme-light .cpd-button:disabled,
body.cpd-theme-light [class*="cpd-button"]:disabled,
body.theme-light [class*="cpd-button"]:disabled,
body.cpd-theme-light .cpd-button[aria-disabled="true"],
body.theme-light .cpd-button[aria-disabled="true"],
body.cpd-theme-light .mx_AccessibleButton_disabled,
body.theme-light .mx_AccessibleButton_disabled,
body.cpd-theme-light .mx_AccessibleButton[aria-disabled="true"],
body.theme-light .mx_AccessibleButton[aria-disabled="true"],
body.cpd-theme-light .mx_Dialog_buttons input[type="submit"]:disabled,
body.theme-light .mx_Dialog_buttons input[type="submit"]:disabled,
body.cpd-theme-light .mx_Dialog button:disabled,
body.theme-light .mx_Dialog button:disabled {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.35) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 5. Context menu and Dialog dividers: eliminate stark white <hr> lines */
body.cpd-theme-dark .mx_RoomSublist_contextMenu hr,
body.theme-dark .mx_RoomSublist_contextMenu hr,
body.cpd-theme-dark .mx_ShareDialog hr,
body.theme-dark .mx_ShareDialog hr,
body.cpd-theme-dark .mx_ContextualMenu hr,
body.theme-dark .mx_ContextualMenu hr,
body.cpd-theme-dark .mx_GenericDropdownMenu_divider,
body.theme-dark .mx_GenericDropdownMenu_divider,
body.cpd-theme-dark hr {
  border: none !important;
  border-top: 1px solid #27272a !important;
  height: 0 !important;
  margin: 6px 0 !important;
}

body.cpd-theme-light .mx_RoomSublist_contextMenu hr,
body.theme-light .mx_RoomSublist_contextMenu hr,
body.cpd-theme-light .mx_ShareDialog hr,
body.theme-light .mx_ShareDialog hr,
body.cpd-theme-light .mx_ContextualMenu hr,
body.theme-light .mx_ContextualMenu hr,
body.cpd-theme-light .mx_GenericDropdownMenu_divider,
body.theme-light .mx_GenericDropdownMenu_divider,
body.cpd-theme-light hr {
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  height: 0 !important;
  margin: 6px 0 !important;
}

/* 6. Standalone inputs (inputs that are NOT wrapped in mx_Field) */
body:not(.theme-light):not(.cpd-theme-light) input[type="text"]:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.cpd-theme-dark input[type="text"]:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.theme-dark input[type="text"]:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body:not(.theme-light):not(.cpd-theme-light) input[type="search"]:not(.mx_Field *):not(.mx_LeftPanel *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.cpd-theme-dark input[type="search"]:not(.mx_Field *):not(.mx_LeftPanel *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.theme-dark input[type="search"]:not(.mx_Field *):not(.mx_LeftPanel *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body:not(.theme-light):not(.cpd-theme-light) input[type="password"]:not(.mx_Field *),
body.cpd-theme-dark input[type="password"]:not(.mx_Field *),
body.theme-dark input[type="password"]:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) input[type="email"]:not(.mx_Field *),
body.cpd-theme-dark input[type="email"]:not(.mx_Field *),
body.theme-dark input[type="email"]:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) input[type="number"]:not(.mx_Field *),
body.cpd-theme-dark input[type="number"]:not(.mx_Field *),
body.theme-dark input[type="number"]:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) input[type="tel"]:not(.mx_Field *),
body.cpd-theme-dark input[type="tel"]:not(.mx_Field *),
body.theme-dark input[type="tel"]:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) input[type="url"]:not(.mx_Field *),
body.cpd-theme-dark input[type="url"]:not(.mx_Field *),
body.theme-dark input[type="url"]:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input),
body.cpd-theme-dark textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input),
body.theme-dark textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input),
body:not(.theme-light):not(.cpd-theme-light) select:not(.mx_Field *),
body.cpd-theme-dark select:not(.mx_Field *),
body.theme-dark select:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) .mx_textinput:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.cpd-theme-dark .mx_textinput:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.theme-dark .mx_textinput:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body:not(.theme-light):not(.cpd-theme-light) .cpd-input,
body.cpd-theme-dark .cpd-input,
body.theme-dark .cpd-input,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.cpd-theme-dark [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.theme-dark [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body:not(.theme-light):not(.cpd-theme-light) .cpd-text-field:not(.mx_Field *),
body.cpd-theme-dark .cpd-text-field:not(.mx_Field *),
body.theme-dark .cpd-text-field:not(.mx_Field *),
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-text-field"]:not(.mx_Field *),
body.cpd-theme-dark [class*="cpd-text-field"]:not(.mx_Field *),
body.theme-dark [class*="cpd-text-field"]:not(.mx_Field *) {
  border: 1px solid #27272a !important;
  background-color: #131417 !important;
  color: var(--cpd-color-text-primary, #ffffff) !important;
  border-radius: 8px !important;
  outline: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) input:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *):focus,
body.cpd-theme-dark input:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *):focus,
body.theme-dark input:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *):focus,
body:not(.theme-light):not(.cpd-theme-light) textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input):focus,
body.cpd-theme-dark textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input):focus,
body.theme-dark textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input):focus,
body:not(.theme-light):not(.cpd-theme-light) select:not(.mx_Field *):focus,
body.cpd-theme-dark select:not(.mx_Field *):focus,
body.theme-dark select:not(.mx_Field *):focus,
body:not(.theme-light):not(.cpd-theme-light) .cpd-input:focus,
body.cpd-theme-dark .cpd-input:focus,
body.theme-dark .cpd-input:focus,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):focus,
body.cpd-theme-dark [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):focus,
body.theme-dark [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Light theme standalone inputs */
body.cpd-theme-light input[type="text"]:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.theme-light input[type="text"]:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.cpd-theme-light input[type="search"]:not(.mx_Field *):not(.mx_LeftPanel *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.theme-light input[type="search"]:not(.mx_Field *):not(.mx_LeftPanel *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *),
body.cpd-theme-light input[type="password"]:not(.mx_Field *),
body.theme-light input[type="password"]:not(.mx_Field *),
body.cpd-theme-light input[type="email"]:not(.mx_Field *),
body.theme-light input[type="email"]:not(.mx_Field *),
body.cpd-theme-light input[type="number"]:not(.mx_Field *),
body.theme-light input[type="number"]:not(.mx_Field *),
body.cpd-theme-light input[type="tel"]:not(.mx_Field *),
body.theme-light input[type="tel"]:not(.mx_Field *),
body.cpd-theme-light input[type="url"]:not(.mx_Field *),
body.theme-light input[type="url"]:not(.mx_Field *),
body.cpd-theme-light textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input),
body.theme-light textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input),
body.cpd-theme-light select:not(.mx_Field *),
body.theme-light select:not(.mx_Field *),
body.cpd-theme-light .mx_textinput:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.theme-light .mx_textinput:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.cpd-theme-light .cpd-input,
body.theme-light .cpd-input,
body.cpd-theme-light [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.theme-light [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *),
body.cpd-theme-light .cpd-text-field:not(.mx_Field *),
body.theme-light .cpd-text-field:not(.mx_Field *),
body.cpd-theme-light [class*="cpd-text-field"]:not(.mx_Field *),
body.theme-light [class*="cpd-text-field"]:not(.mx_Field *) {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  background-color: #ffffff !important;
  color: var(--cpd-color-text-primary, #0f172a) !important;
  border-radius: 8px !important;
  outline: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-light input:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *):focus,
body.theme-light input:not(.mx_Field *):not(.mx_InviteDialog_editor *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):not(.mx_SearchBox *):not(.mx_RoomSearch *):not(.mx_SearchBar *):focus,
body.cpd-theme-light textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input):focus,
body.theme-light textarea:not(.mx_Field *):not(.mx_BasicMessageComposer_input):focus,
body.cpd-theme-light select:not(.mx_Field *):focus,
body.theme-light select:not(.mx_Field *):focus,
body.cpd-theme-light .cpd-input:focus,
body.theme-light .cpd-input:focus,
body.cpd-theme-light [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):focus,
body.theme-light [class*="cpd-input"]:not(.mx_Field *):not(.mx_SpotlightDialog *):not(.mx_SpotlightDialog_searchBox *):not(.mx_AutocompleteInput *):not(.mx_AutocompleteInput_editor *):focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 7. Unified Field containers (single-layer, seamless input & prefix) */
body:not(.theme-light):not(.cpd-theme-light) .mx_Field,
body.cpd-theme-dark .mx_Field,
body.theme-dark .mx_Field,
body:not(.theme-light):not(.cpd-theme-light) .cpd-form-field,
body.cpd-theme-dark .cpd-form-field,
body.theme-dark .cpd-form-field,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-form-field"],
body.cpd-theme-dark [class*="cpd-form-field"],
body.theme-dark [class*="cpd-form-field"],
body:not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_input:not(.mx_Field *),
body.cpd-theme-dark .mx_Dropdown_input:not(.mx_Field *),
body.theme-dark .mx_Dropdown_input:not(.mx_Field *) {
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  background-color: #131417 !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-light .mx_Field,
body.theme-light .mx_Field,
body.cpd-theme-light .cpd-form-field,
body.theme-light .cpd-form-field,
body.cpd-theme-light [class*="cpd-form-field"],
body.theme-light [class*="cpd-form-field"],
body.cpd-theme-light .mx_Dropdown_input:not(.mx_Field *),
body.theme-light .mx_Dropdown_input:not(.mx_Field *) {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_Field:focus-within,
body.cpd-theme-dark .mx_Field:focus-within,
body.theme-dark .mx_Field:focus-within,
body:not(.theme-light):not(.cpd-theme-light) .cpd-form-field:focus-within,
body.cpd-theme-dark .cpd-form-field:focus-within,
body.theme-dark .cpd-form-field:focus-within,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-form-field"]:focus-within,
body.cpd-theme-dark [class*="cpd-form-field"]:focus-within,
body.theme-dark [class*="cpd-form-field"]:focus-within,
body:not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_input:not(.mx_Field *):focus,
body.cpd-theme-dark .mx_Dropdown_input:not(.mx_Field *):focus,
body.theme-dark .mx_Dropdown_input:not(.mx_Field *):focus,
body:not(.theme-light):not(.cpd-theme-light) .mx_Field_valid.mx_Field,
body.cpd-theme-dark .mx_Field_valid.mx_Field,
body.theme-dark .mx_Field_valid.mx_Field {
  border-color: #10b981 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.cpd-theme-light .mx_Field:focus-within,
body.theme-light .mx_Field:focus-within,
body.cpd-theme-light .cpd-form-field:focus-within,
body.theme-light .cpd-form-field:focus-within,
body.cpd-theme-light [class*="cpd-form-field"]:focus-within,
body.theme-light [class*="cpd-form-field"]:focus-within,
body.cpd-theme-light .mx_Dropdown_input:not(.mx_Field *):focus,
body.theme-light .mx_Dropdown_input:not(.mx_Field *):focus,
body.cpd-theme-light .mx_Field_valid.mx_Field,
body.theme-light .mx_Field_valid.mx_Field {
  border-color: #10b981 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Strip ALL inner borders, backgrounds, and shadows from elements INSIDE mx_Field and cpd-form-field */
.mx_Field input,
.mx_Field input[type="text"],
.mx_Field input[type="search"],
.mx_Field input[type="password"],
.mx_Field input[type="email"],
.mx_Field input[type="number"],
.mx_Field input[type="tel"],
.mx_Field select,
.mx_Field textarea,
.mx_Field .mx_Dropdown,
.mx_Field .mx_Dropdown_input,
.mx_Field .mx_CountryDropdown,
.cpd-form-field input,
[class*="cpd-form-field"] input,
.cpd-form-field textarea,
[class*="cpd-form-field"] textarea,
.cpd-form-field select,
[class*="cpd-form-field"] select {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus,
.mx_Field .mx_Dropdown_input:focus,
.cpd-form-field input:focus,
[class*="cpd-form-field"] input:focus,
.cpd-form-field textarea:focus,
[class*="cpd-form-field"] textarea:focus,
.cpd-form-field select:focus,
[class*="cpd-form-field"] select:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* mx_Field_prefix: clean single vertical divider, no nested card appearance */
.mx_Field_prefix {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  padding: 0 8px 0 10px !important;
  margin: 0 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_Field_prefix,
body.cpd-theme-dark .mx_Field_prefix,
body.theme-dark .mx_Field_prefix {
  border-right: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_Field_prefix,
body.theme-light .mx_Field_prefix {
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mx_Field_postfix {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  padding: 0 10px 0 8px !important;
  margin: 0 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_Field_postfix,
body.cpd-theme-dark .mx_Field_postfix,
body.theme-dark .mx_Field_postfix {
  border-left: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_Field_postfix,
body.theme-light .mx_Field_postfix {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   7.1 Compound Design System: Segmented Controls
   ========================================================================== */
.cpd-segmented-control,
[class*="cpd-segmented-control"],
[role="radiogroup"].cpd-segmented-control,
[role="radiogroup"][data-orientation="horizontal"],
.mx_FilterTabSlider,
.mx_SegmentedControl {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 3px !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  gap: 2px !important;
  max-width: 100% !important;
  outline: none !important;
}

body:not(.theme-light):not(.cpd-theme-light) .cpd-segmented-control,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control"],
body:not(.theme-light):not(.cpd-theme-light) [role="radiogroup"].cpd-segmented-control,
body:not(.theme-light):not(.cpd-theme-light) [role="radiogroup"][data-orientation="horizontal"],
body:not(.theme-light):not(.cpd-theme-light) .mx_FilterTabSlider,
body:not(.theme-light):not(.cpd-theme-light) .mx_SegmentedControl,
body.cpd-theme-dark .cpd-segmented-control,
body.cpd-theme-dark [class*="cpd-segmented-control"],
body.cpd-theme-dark [role="radiogroup"].cpd-segmented-control,
body.cpd-theme-dark [role="radiogroup"][data-orientation="horizontal"],
body.cpd-theme-dark .mx_FilterTabSlider,
body.cpd-theme-dark .mx_SegmentedControl,
body.theme-dark .cpd-segmented-control,
body.theme-dark [class*="cpd-segmented-control"],
body.theme-dark [role="radiogroup"].cpd-segmented-control,
body.theme-dark [role="radiogroup"][data-orientation="horizontal"],
body.theme-dark .mx_FilterTabSlider,
body.theme-dark .mx_SegmentedControl {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
}

body.cpd-theme-light .cpd-segmented-control,
body.cpd-theme-light [class*="cpd-segmented-control"],
body.cpd-theme-light [role="radiogroup"].cpd-segmented-control,
body.cpd-theme-light [role="radiogroup"][data-orientation="horizontal"],
body.cpd-theme-light .mx_FilterTabSlider,
body.cpd-theme-light .mx_SegmentedControl,
body.theme-light .cpd-segmented-control,
body.theme-light [class*="cpd-segmented-control"],
body.theme-light [role="radiogroup"].cpd-segmented-control,
body.theme-light [role="radiogroup"][data-orientation="horizontal"],
body.theme-light .mx_FilterTabSlider,
body.theme-light .mx_SegmentedControl {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Segmented Control Items */
.cpd-segmented-control__item,
[class*="cpd-segmented-control__item"],
[class*="cpd-segmented-control"] [role="radio"],
.cpd-segmented-control [role="radio"],
.mx_FilterTabSlider_tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  outline: none !important;
  user-select: none !important;
}

/* Inactive Item Dark */
body:not(.theme-light):not(.cpd-theme-light) .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]),
body:not(.theme-light):not(.cpd-theme-light) .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active),
body.cpd-theme-dark .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.cpd-theme-dark [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.cpd-theme-dark [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]),
body.cpd-theme-dark .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active),
body.theme-dark .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.theme-dark [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.theme-dark [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]),
body.theme-dark .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active) {
  color: #a1a1aa !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body:not(.theme-light):not(.cpd-theme-light) .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]):hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active):hover,
body.cpd-theme-dark .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.cpd-theme-dark [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.cpd-theme-dark [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]):hover,
body.cpd-theme-dark .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active):hover,
body.theme-dark .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.theme-dark [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.theme-dark [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]):hover,
body.theme-dark .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active):hover {
  color: #f4f4f5 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Inactive Item Light */
body.cpd-theme-light .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.cpd-theme-light [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.cpd-theme-light [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]),
body.cpd-theme-light .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active),
body.theme-light .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.theme-light [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active),
body.theme-light [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]),
body.theme-light .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active) {
  color: #64748b !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body.cpd-theme-light .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.cpd-theme-light [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.cpd-theme-light [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]):hover,
body.cpd-theme-light .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active):hover,
body.theme-light .cpd-segmented-control__item:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.theme-light [class*="cpd-segmented-control__item"]:not([aria-checked="true"]):not([data-state="checked"]):not([data-state="on"]):not(.mx_FilterTabSlider_tab_active):hover,
body.theme-light [class*="cpd-segmented-control"] [role="radio"]:not([aria-checked="true"]):not([data-state="checked"]):hover,
body.theme-light .mx_FilterTabSlider_tab:not(.mx_FilterTabSlider_tab_active):hover {
  color: #0f172a !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Active / Checked Item Dark */
body:not(.theme-light):not(.cpd-theme-light) .cpd-segmented-control__item[aria-checked="true"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-segmented-control__item[data-state="checked"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-segmented-control__item[data-state="on"],
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control__item"][aria-checked="true"],
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-segmented-control"] [role="radio"][aria-checked="true"],
body:not(.theme-light):not(.cpd-theme-light) .mx_FilterTabSlider_tab_active,
body.cpd-theme-dark .cpd-segmented-control__item[aria-checked="true"],
body.cpd-theme-dark .cpd-segmented-control__item[data-state="checked"],
body.cpd-theme-dark .cpd-segmented-control__item[data-state="on"],
body.cpd-theme-dark [class*="cpd-segmented-control__item"][aria-checked="true"],
body.cpd-theme-dark [class*="cpd-segmented-control"] [role="radio"][aria-checked="true"],
body.cpd-theme-dark .mx_FilterTabSlider_tab_active,
body.theme-dark .cpd-segmented-control__item[aria-checked="true"],
body.theme-dark .cpd-segmented-control__item[data-state="checked"],
body.theme-dark .cpd-segmented-control__item[data-state="on"],
body.theme-dark [class*="cpd-segmented-control__item"][aria-checked="true"],
body.theme-dark [class*="cpd-segmented-control"] [role="radio"][aria-checked="true"],
body.theme-dark .mx_FilterTabSlider_tab_active {
  background-color: #27272a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Active / Checked Item Light */
body.cpd-theme-light .cpd-segmented-control__item[aria-checked="true"],
body.cpd-theme-light .cpd-segmented-control__item[data-state="checked"],
body.cpd-theme-light .cpd-segmented-control__item[data-state="on"],
body.cpd-theme-light [class*="cpd-segmented-control__item"][aria-checked="true"],
body.cpd-theme-light [class*="cpd-segmented-control"] [role="radio"][aria-checked="true"],
body.cpd-theme-light .mx_FilterTabSlider_tab_active,
body.theme-light .cpd-segmented-control__item[aria-checked="true"],
body.theme-light .cpd-segmented-control__item[data-state="checked"],
body.theme-light .cpd-segmented-control__item[data-state="on"],
body.theme-light [class*="cpd-segmented-control__item"][aria-checked="true"],
body.theme-light [class*="cpd-segmented-control"] [role="radio"][aria-checked="true"],
body.theme-light .mx_FilterTabSlider_tab_active {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Segmented Control Focus ring */
.cpd-segmented-control__item:focus-visible,
[class*="cpd-segmented-control__item"]:focus-visible,
[class*="cpd-segmented-control"] [role="radio"]:focus-visible,
.mx_FilterTabSlider_tab:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45) !important;
}

/* Icons inside segmented controls */
.cpd-segmented-control svg,
[class*="cpd-segmented-control"] svg,
.mx_FilterTabSlider_tab svg {
  width: 14px !important;
  height: 14px !important;
  color: inherit !important;
  stroke: currentColor !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   7.2 Compound Design System: Tabs
   ========================================================================== */
.cpd-tabs,
[class*="cpd-tabs"],
.cpd-tab-list,
[class*="cpd-tab-list"],
[role="tablist"]:not(.mx_TabbedView_tabLabels) {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  padding: 0 4px !important;
  outline: none !important;
}

body:not(.theme-light):not(.cpd-theme-light) .cpd-tabs,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-tabs"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-tab-list,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-tab-list"],
body:not(.theme-light):not(.cpd-theme-light) [role="tablist"]:not(.mx_TabbedView_tabLabels),
body.cpd-theme-dark .cpd-tabs,
body.cpd-theme-dark [class*="cpd-tabs"],
body.cpd-theme-dark .cpd-tab-list,
body.cpd-theme-dark [class*="cpd-tab-list"],
body.cpd-theme-dark [role="tablist"]:not(.mx_TabbedView_tabLabels),
body.theme-dark .cpd-tabs,
body.theme-dark [class*="cpd-tabs"],
body.theme-dark .cpd-tab-list,
body.theme-dark [class*="cpd-tab-list"],
body.theme-dark [role="tablist"]:not(.mx_TabbedView_tabLabels) {
  border-bottom: 1px solid #27272a !important;
}

body.cpd-theme-light .cpd-tabs,
body.cpd-theme-light [class*="cpd-tabs"],
body.cpd-theme-light .cpd-tab-list,
body.cpd-theme-light [class*="cpd-tab-list"],
body.cpd-theme-light [role="tablist"]:not(.mx_TabbedView_tabLabels),
body.theme-light .cpd-tabs,
body.theme-light [class*="cpd-tabs"],
body.theme-light .cpd-tab-list,
body.theme-light [class*="cpd-tab-list"],
body.theme-light [role="tablist"]:not(.mx_TabbedView_tabLabels) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Individual tab button */
.cpd-tab,
[class*="cpd-tab"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
[role="tab"]:not(.mx_TabbedView_tabLabel) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: 6px 6px 0 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  outline: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Tab inactive dark */
body:not(.theme-light):not(.cpd-theme-light) .cpd-tab:not([aria-selected="true"]):not([data-state="active"]),
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body:not(.theme-light):not(.cpd-theme-light) [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel),
body.cpd-theme-dark .cpd-tab:not([aria-selected="true"]):not([data-state="active"]),
body.cpd-theme-dark [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.cpd-theme-dark [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel),
body.theme-dark .cpd-tab:not([aria-selected="true"]):not([data-state="active"]),
body.theme-dark [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.theme-dark [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel) {
  color: #a1a1aa !important;
}

body:not(.theme-light):not(.cpd-theme-light) .cpd-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]):hover,
body:not(.theme-light):not(.cpd-theme-light) [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel):hover,
body.cpd-theme-dark .cpd-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
body.cpd-theme-dark [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]):hover,
body.cpd-theme-dark [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel):hover,
body.theme-dark .cpd-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
body.theme-dark [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]):hover,
body.theme-dark [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel):hover {
  color: #f4f4f5 !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Tab inactive light */
body.cpd-theme-light .cpd-tab:not([aria-selected="true"]):not([data-state="active"]),
body.cpd-theme-light [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.cpd-theme-light [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel),
body.theme-light .cpd-tab:not([aria-selected="true"]):not([data-state="active"]),
body.theme-light [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.theme-light [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel) {
  color: #64748b !important;
}

body.cpd-theme-light .cpd-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
body.cpd-theme-light [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]):hover,
body.cpd-theme-light [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel):hover,
body.theme-light .cpd-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
body.theme-light [class*="cpd-tab"]:not([aria-selected="true"]):not([data-state="active"]):not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]):hover,
body.theme-light [role="tab"]:not([aria-selected="true"]):not([data-state="active"]):not(.mx_TabbedView_tabLabel):hover {
  color: #0f172a !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Tab active dark */
body:not(.theme-light):not(.cpd-theme-light) .cpd-tab[aria-selected="true"],
body:not(.theme-light):not(.cpd-theme-light) .cpd-tab[data-state="active"],
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-tab"][aria-selected="true"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body:not(.theme-light):not(.cpd-theme-light) [class*="cpd-tab"][data-state="active"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body:not(.theme-light):not(.cpd-theme-light) [role="tab"][aria-selected="true"]:not(.mx_TabbedView_tabLabel),
body:not(.theme-light):not(.cpd-theme-light) [role="tab"][data-state="active"]:not(.mx_TabbedView_tabLabel),
body.cpd-theme-dark .cpd-tab[aria-selected="true"],
body.cpd-theme-dark .cpd-tab[data-state="active"],
body.cpd-theme-dark [class*="cpd-tab"][aria-selected="true"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.cpd-theme-dark [class*="cpd-tab"][data-state="active"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.cpd-theme-dark [role="tab"][aria-selected="true"]:not(.mx_TabbedView_tabLabel),
body.cpd-theme-dark [role="tab"][data-state="active"]:not(.mx_TabbedView_tabLabel),
body.theme-dark .cpd-tab[aria-selected="true"],
body.theme-dark .cpd-tab[data-state="active"],
body.theme-dark [class*="cpd-tab"][aria-selected="true"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.theme-dark [class*="cpd-tab"][data-state="active"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.theme-dark [role="tab"][aria-selected="true"]:not(.mx_TabbedView_tabLabel),
body.theme-dark [role="tab"][data-state="active"]:not(.mx_TabbedView_tabLabel) {
  color: #10b981 !important;
  border-bottom-color: #10b981 !important;
  font-weight: 600 !important;
}

/* Tab active light */
body.cpd-theme-light .cpd-tab[aria-selected="true"],
body.cpd-theme-light .cpd-tab[data-state="active"],
body.cpd-theme-light [class*="cpd-tab"][aria-selected="true"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.cpd-theme-light [class*="cpd-tab"][data-state="active"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.cpd-theme-light [role="tab"][aria-selected="true"]:not(.mx_TabbedView_tabLabel),
body.cpd-theme-light [role="tab"][data-state="active"]:not(.mx_TabbedView_tabLabel),
body.theme-light .cpd-tab[aria-selected="true"],
body.theme-light .cpd-tab[data-state="active"],
body.theme-light [class*="cpd-tab"][aria-selected="true"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.theme-light [class*="cpd-tab"][data-state="active"]:not([class*="cpd-tabs"]):not([class*="cpd-tab-list"]):not([class*="cpd-tab-panel"]),
body.theme-light [role="tab"][aria-selected="true"]:not(.mx_TabbedView_tabLabel),
body.theme-light [role="tab"][data-state="active"]:not(.mx_TabbedView_tabLabel) {
  color: #059669 !important;
  border-bottom-color: #059669 !important;
  font-weight: 600 !important;
}

/* Focus visible on tabs */
.cpd-tab:focus-visible,
[class*="cpd-tab"]:focus-visible,
[role="tab"]:focus-visible,
.mx_TabbedView_tabLabel:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45) !important;
}

/* Icons inside tabs */
.cpd-tab svg,
[class*="cpd-tab"] svg,
[role="tab"] svg {
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  stroke: currentColor !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 8. Copyable text elements */
body.cpd-theme-dark .mx_CopyableText.mx_CopyableText_border,
body.theme-dark .mx_CopyableText.mx_CopyableText_border,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText.mx_CopyableText_border {
  border: 1px solid #27272a !important;
  background-color: #131417 !important;
  border-radius: 8px !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_CopyableText.mx_CopyableText_border,
body.theme-light .mx_CopyableText.mx_CopyableText_border,
body[class*="light"] .mx_CopyableText.mx_CopyableText_border,
html[class*="light"] .mx_CopyableText.mx_CopyableText_border {
  border: 1px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  border-radius: 8px !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_ContextualMenu,
body.theme-dark .mx_ContextualMenu,
body:not(.cpd-theme-light):not(.theme-light) .mx_ContextualMenu,
body.cpd-theme-dark .mx_Dropdown_menu,
body.theme-dark .mx_Dropdown_menu,
body:not(.cpd-theme-light):not(.theme-light) .mx_Dropdown_menu {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.cpd-theme-light .mx_ContextualMenu,
body.theme-light .mx_ContextualMenu,
body.cpd-theme-light .mx_Dropdown_menu,
body.theme-light .mx_Dropdown_menu {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Inner context menu content must be transparent and borderless */
.mx_ContextualMenu .mx_IconizedContextMenu,
.mx_ContextualMenu .mx_UserMenu_contextMenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: inherit !important;
}

/* 10. Modals and Dialogs (Single-Surface Zero-Nesting Architecture) */
body.cpd-theme-dark .mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog):not(.mx_ImageView_wrapper .mx_Dialog),
body.theme-dark .mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog):not(.mx_ImageView_wrapper .mx_Dialog),
body:not(.cpd-theme-light):not(.theme-light) .mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog):not(.mx_ImageView_wrapper .mx_Dialog) {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

body.cpd-theme-light .mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog):not(.mx_ImageView_wrapper .mx_Dialog),
body.theme-light .mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog):not(.mx_ImageView_wrapper .mx_Dialog) {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 11. Reaction buttons in dark mode: eliminate white borders */
body.cpd-theme-dark .mx_ReactionsRowButton,
body.theme-dark .mx_ReactionsRowButton,
body.cpd-theme-dark .mx_ReactionRowButton,
body.theme-dark .mx_ReactionRowButton {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #27272a !important;
  border-radius: 10px !important;
  transition: all 0.12s ease !important;
}

body.cpd-theme-dark .mx_ReactionsRowButton:hover,
body.theme-dark .mx_ReactionsRowButton:hover,
body.cpd-theme-dark .mx_ReactionRowButton:hover,
body.theme-dark .mx_ReactionRowButton:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.cpd-theme-dark .mx_ReactionsRowButton.mx_ReactionsRowButton_selected,
body.theme-dark .mx_ReactionsRowButton.mx_ReactionsRowButton_selected,
body.cpd-theme-dark .mx_ReactionRowButton.mx_ReactionRowButton_selected,
body.theme-dark .mx_ReactionRowButton.mx_ReactionRowButton_selected {
  background-color: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

/* 12. Message Composer editor */
body.cpd-theme-dark .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor,
body.theme-dark .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor {
  border: 1px solid #27272a !important;
  background-color: #131417 !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-dark .mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor,
body.theme-dark .mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor {
  border-color: rgba(16, 185, 129, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

body.cpd-theme-light .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor,
body.theme-light .mx_SendWysiwygComposer .mx_WysiwygComposer_Editor {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-light .mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor,
body.theme-light .mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

/* 13. Room Header & Banner borders */
body.cpd-theme-dark .mx_RoomHeader,
body.theme-dark .mx_RoomHeader,
body.cpd-theme-dark .mx_PinnedMessageBanner,
body.theme-dark .mx_PinnedMessageBanner {
  border-bottom: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_RoomHeader,
body.theme-light .mx_RoomHeader,
body.cpd-theme-light .mx_PinnedMessageBanner,
body.theme-light .mx_PinnedMessageBanner {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 14. Space Create & Share dialog controls */
body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType,
body.theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType,
body.cpd-theme-dark .mx_SpacePublicShare .mx_AccessibleButton,
body.theme-dark .mx_SpacePublicShare .mx_AccessibleButton {
  border: 1px solid #27272a !important;
}

body.cpd-theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover,
body.theme-dark .mx_SpaceCreateMenu_wrapper .mx_ContextualMenu .mx_SpaceCreateMenuType:hover,
body.cpd-theme-dark .mx_SpacePublicShare .mx_AccessibleButton:hover,
body.theme-dark .mx_SpacePublicShare .mx_AccessibleButton:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
}

/* 15. Checkbox & Radio active borders */
body.cpd-theme-dark .mx_Checkbox input[type="checkbox"]+label>.mx_Checkbox_background,
body.theme-dark .mx_Checkbox input[type="checkbox"]+label>.mx_Checkbox_background,
body.cpd-theme-dark .mx_StyledRadioButton input[type="radio"]+div,
body.theme-dark .mx_StyledRadioButton input[type="radio"]+div {
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  background-color: transparent !important;
}

body.cpd-theme-dark .mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"]:checked+label>.mx_Checkbox_background,
body.theme-dark .mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"]:checked+label>.mx_Checkbox_background {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

body.cpd-theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div,
body.theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div {
  background-color: transparent !important;
  border-color: #10b981 !important;
}

body.cpd-theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div>div,
body.theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div>div {
  background-color: #10b981 !important;
}


/* 16. Active / focus states */
body.cpd-theme-dark ._button_i91xf_17[data-kind="secondary"]:active,
body.theme-dark ._button_i91xf_17[data-kind="secondary"]:active,
body.cpd-theme-dark ._control_9gon8_18:active,
body.theme-dark ._control_9gon8_18:active,
body.cpd-theme-dark ._search_qztja_17:active,
body.theme-dark ._search_qztja_17:active,
body.cpd-theme-dark .mx_PollOption_checked,
body.theme-dark .mx_PollOption_checked {
  border-color: rgba(16, 185, 129, 0.6) !important;
}

/* 17. Spotlight Command Palette & Search Dialog (Cmd+K / Ctrl+K Palette) */

/* Outer Modal Wrapper & Backdrop Alignment - Centered horizontally & vertically */
.mx_SpotlightDialog_wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  z-index: 4000 !important;
}

.mx_SpotlightDialog_wrapper .mx_Dialog_background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Modal Shell Geometry - Perfectly centered in viewport */
.mx_SpotlightDialog_wrapper .mx_Dialog {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: 640px !important;
  height: 520px !important;
  max-height: min(520px, calc(85vh - 32px)) !important;
  max-height: min(520px, calc(85dvh - 32px)) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* Dark Theme Dialog Shell */
body.theme-dark .mx_SpotlightDialog_wrapper .mx_Dialog,
body.cpd-theme-dark .mx_SpotlightDialog_wrapper .mx_Dialog,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog_wrapper .mx_Dialog {
  background-color: #121316 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.8),
              0 0 0 1px rgba(255, 255, 255, 0.04),
              0 0 48px -8px rgba(16, 185, 129, 0.08) !important;
  color: #f4f4f5 !important;
}

/* Light Theme Dialog Shell */
body.theme-light .mx_SpotlightDialog_wrapper .mx_Dialog,
body.cpd-theme-light .mx_SpotlightDialog_wrapper .mx_Dialog {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.14),
              0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

/* Dialog Internal Layout Flow - Centered pass-through container */
.mx_SpotlightDialog_wrapper .mx_Dialog_border {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  margin: auto !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 4010 !important;
  order: 1 !important;
}

.mx_SpotlightDialog {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.mx_SpotlightDialog .mx_Dialog_header {
  display: none !important;
}

/* Integrated Search Input Header */
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
.mx_SpotlightDialog_searchBox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

/* Header Magnifier Icon */
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before {
  content: "" !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  flex-shrink: 0 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  transition: background-color 0.15s ease !important;
}

/* Dark Mode Search Box Border & Background */
body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before {
  background-color: #71717a !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within {
  border-bottom-color: rgba(16, 185, 129, 0.45) !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within::before,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within::before,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within::before {
  background-color: #10b981 !important;
}

/* Light Mode Search Box Border & Background */
body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox::before {
  background-color: #94a3b8 !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within {
  border-bottom-color: rgba(16, 185, 129, 0.45) !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within::before,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox:focus-within::before {
  background-color: #059669 !important;
}

/* Inner Text Input */
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input[type="text"],
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input[type="search"],
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input:focus,
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input:focus-visible,
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input:hover,
html body .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input:active,
html body .mx_SpotlightDialog_searchBox input,
html body .mx_SpotlightDialog_searchBox input[type="text"],
html body .mx_SpotlightDialog_searchBox input[type="search"],
html body .mx_SpotlightDialog_searchBox input:focus,
html body .mx_SpotlightDialog_searchBox input:focus-visible,
html body .mx_SpotlightDialog_searchBox input:hover,
html body .mx_SpotlightDialog_searchBox input:active {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 38px !important;
  box-sizing: border-box !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
body.theme-dark .mx_SpotlightDialog_searchBox input,
body.cpd-theme-dark .mx_SpotlightDialog_searchBox input,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog_searchBox input {
  color: #f4f4f5 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input::placeholder,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input::placeholder,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input::placeholder {
  color: #71717a !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input {
  color: #0f172a !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input::placeholder,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* Spinner indicator in search box */
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox > .mx_Spinner {
  flex-shrink: 0 !important;
  margin: 0 0 0 8px !important;
}

/* Filter Pills inside Search Box */
.mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  border-radius: 6px !important;
  padding: 0 8px 0 28px !important;
  margin: 0 6px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter {
  background-color: rgba(16, 185, 129, 0.16) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

body.theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter::before,
body.cpd-theme-dark .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter::before,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter::before {
  background-color: #34d399 !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
}

body.theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter::before,
body.cpd-theme-light .mx_SpotlightDialog .mx_SpotlightDialog_searchBox .mx_SpotlightDialog_filter::before {
  background-color: #059669 !important;
}

.mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
  cursor: pointer !important;
  background-color: rgba(0, 0, 0, 0.14) !important;
  transition: opacity 0.15s ease, background-color 0.15s ease !important;
}

.mx_SpotlightDialog_filter .mx_SpotlightDialog_filter--close:hover {
  background-color: rgba(0, 0, 0, 0.28) !important;
}

/* Modal Content Scroll Area */
.mx_SpotlightDialog #mx_SpotlightDialog_content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 14px 16px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content::-webkit-scrollbar {
  width: 6px !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content::-webkit-scrollbar-track {
  background: transparent !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content::-webkit-scrollbar-thumb {
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content::-webkit-scrollbar-thumb,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Sections & Clean Separation */
.mx_SpotlightDialog #mx_SpotlightDialog_content ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section {
  margin: 0 !important;
  padding: 4px 0 !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section {
  margin-top: 14px !important;
  padding-top: 14px !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section + .mx_SpotlightDialog_section {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Section Headings */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader > h4 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 2px 8px 6px !important;
  margin: 0 0 4px 0 !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader > h4,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader > h4,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4 {
  color: #71717a !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section > h4,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader > h4,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_sectionHeader > h4 {
  color: #64748b !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #10b981 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Recently Viewed Section (Full-width vertical rows, 1 row per item) */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed > div {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 2px !important;
  overflow: visible !important;
  white-space: normal !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed > div::-webkit-scrollbar {
  display: none !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 6px 12px !important;
  margin: 2px 0 !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  position: relative !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background-color 0.12s ease, border-color 0.12s ease !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option + .mx_SpotlightDialog_option {
  margin-left: 0 !important;
  margin-top: 2px !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option > .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option .mx_DecoratedRoomAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option .mx_BaseAvatar {
  margin: 0 12px 0 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
  color: #f4f4f5 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"],
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"] {
  background-color: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  color: #ffffff !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option[aria-selected="true"] {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #065f46 !important;
}

/* Vertical List Rows (Search Results, Recent Searches, Recently Viewed, Other Searches) */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  position: relative !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: background-color 0.12s ease, border-color 0.12s ease !important;
}

/* Avatars in vertical rows */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option > .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentlyViewed .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_BaseAvatar,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option > .mx_DecoratedRoomAvatar {
  margin-right: 11px !important;
  flex-shrink: 0 !important;
}

/* Dark Mode Vertical List Row Colors */
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option {
  color: #f4f4f5 !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover,
body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"],
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] {
  background-color: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  color: #ffffff !important;
}

/* Light Mode Vertical List Row Colors */
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option {
  color: #0f172a !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_hiddenResults .mx_SpotlightDialog_option:hover,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_option:hover,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_recentSearches .mx_SpotlightDialog_option:hover,
body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_results .mx_SpotlightDialog_option:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"],
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #065f46 !important;
}

/* Secondary Metadata / Details */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details {
  font-size: 12.5px !important;
  line-height: normal !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 1 auto !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details {
  color: #71717a !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_result_details {
  color: #64748b !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_result_details,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_result_details,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_result_details {
  color: #cbd5e1 !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_result_details,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_result_details {
  color: #047857 !important;
}

/* Action Items in "Other Searches" (Explore Rooms, Spaces, Direct Messages) */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicSpaces,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat {
  padding-left: 44px !important;
  position: relative !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicRooms::before,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_explorePublicSpaces::before,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_joinRoomAlias::before,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startChat::before,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches .mx_SpotlightDialog_startGroupChat::before {
  content: "" !important;
  height: 20px !important;
  width: 20px !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
  background-color: #10b981 !important;
}

/* Suppress message search hint / other searches note entirely from Spotlight dialog */
.mx_SpotlightDialog_section[aria-labelledby="mx_SpotlightDialog_section_messageSearch"],
.mx_SpotlightDialog_section[aria-labelledby="mx_SpotlightDialog_section_messageSearch"] *,
.mx_SpotlightDialog_section:has(#mx_SpotlightDialog_section_messageSearch),
.mx_SpotlightDialog_section:has(.mx_SpotlightDialog_otherSearches_messageSearchText),
.mx_SpotlightDialog_section:has(.mx_SpotlightDialog_otherSearches_messageSearchIcon),
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section[aria-labelledby="mx_SpotlightDialog_section_messageSearch"],
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section[aria-labelledby="mx_SpotlightDialog_section_messageSearch"] *,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_section:has(#mx_SpotlightDialog_section_messageSearch),
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches[aria-labelledby="mx_SpotlightDialog_section_messageSearch"],
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches[aria-labelledby="mx_SpotlightDialog_section_messageSearch"] *,
.mx_SpotlightDialog #mx_SpotlightDialog_content #mx_SpotlightDialog_section_messageSearch,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches_messageSearchText,
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_otherSearches_messageSearchIcon,
[aria-labelledby="mx_SpotlightDialog_section_messageSearch"],
[aria-labelledby="mx_SpotlightDialog_section_messageSearch"] *,
#mx_SpotlightDialog_section_messageSearch,
.mx_SpotlightDialog_otherSearches_messageSearchText,
.mx_SpotlightDialog_otherSearches_messageSearchText *,
.mx_SpotlightDialog_otherSearches_messageSearchIcon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* End Adornment & Enter Prompt */
.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option .mx_SpotlightDialog_option--endAdornment {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt {
  display: none !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_option[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
  display: inline-flex !important;
  align-items: center !important;
}

body.theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt,
body.cpd-theme-dark .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt,
body:not(.theme-light):not(.cpd-theme-light) .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

body.theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt,
body.cpd-theme-light .mx_SpotlightDialog #mx_SpotlightDialog_content .mx_SpotlightDialog_enterPrompt {
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

/* Suppress floating keyboard prompt to keep search modal clean & perfectly centered */
.mx_SpotlightDialog_wrapper #mx_SpotlightDialog_keyboardPrompt,
.mx_SpotlightDialog_wrapper .mx_Dialog_border > #mx_SpotlightDialog_keyboardPrompt,
.mx_SpotlightDialog_wrapper .mx_Dialog #mx_SpotlightDialog_keyboardPrompt,
#mx_SpotlightDialog_keyboardPrompt {
  display: none !important;
}

/* ==========================================================================
   18. Universal Non-Nested Modal Architecture (Single-Container Layout For All Modals)
   ========================================================================== */

/* 1. Eliminate outer double container & pass through layout seamlessly */
.mx_Dialog_border {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  padding: 0 !important;
  margin: auto !important;
  box-shadow: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* 2. Universal single modal container with zero outer padding */
.mx_Dialog:not(.mx_Dialog_lightbox .mx_Dialog) {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Desktop sizing standards */
@media (min-width: 768px) {
  /* Default / Standard Dialogs (Create Room, Invite, Export, etc.) */
  .mx_Dialog:not(:has(.mx_TabbedView)):not(.mx_SpotlightDialog):not(.mx_Dialog_lightbox .mx_Dialog) {
    width: min(540px, calc(100vw - 32px)) !important;
    max-width: 540px !important;
    max-height: calc(88vh - 40px) !important;
    min-width: 380px !important;
    border-radius: 16px !important;
  }

  /* Compact / Confirmation Dialogs */
  .mx_Dialog:has(.mx_QuestionDialog),
  .mx_Dialog:has(.mx_ErrorDialog),
  .mx_Dialog:has(.mx_InfoDialog),
  .mx_Dialog:has(.mx_ConfirmUserActionDialog),
  .mx_Dialog:has(.mx_LeaveSpaceDialog) {
    width: min(460px, calc(100vw - 32px)) !important;
    max-width: 460px !important;
  }

  /* Tabbed Settings Dialogs */
  .mx_Dialog:has(.mx_UserSettingsDialog),
  .mx_Dialog.mx_UserSettingsDialog,
  .mx_Dialog:has(.mx_SpaceSettingsDialog),
  .mx_Dialog.mx_SpaceSettingsDialog,
  .mx_Dialog:has(.mx_RoomSettingsDialog),
  .mx_Dialog.mx_RoomSettingsDialog,
  .mx_Dialog:has(.mx_TabbedView),
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog {
    width: 90vw !important;
    max-width: 980px !important;
    height: 82vh !important;
    max-height: 760px !important;
    min-height: 520px !important;
    border-radius: 16px !important;
  }
}

/* Reset and neutralize React focus-lock sentinel guards to prevent them from intercepting scroll or pointer events */
[data-focus-guard],
[data-focus-guard="true"],
div[data-focus-guard],
span[data-focus-guard],
.mx_Dialog [data-focus-guard],
.mx_Dialog_wrapper [data-focus-guard] {
  width: 0px !important;
  height: 0px !important;
  min-height: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  max-width: 0px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  flex: 0 0 0px !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  display: block !important;
}

/* 3. Flatten and fill settings dialog wrappers (full height & non-nested) */
.mx_UserSettingsDialog,
.mx_SpaceSettingsDialog,
.mx_RoomSettingsDialog,
.mx_SpacePreferencesDialog,
.mx_Dialog:has(.mx_TabbedView) > .mx_UserSettingsDialog,
.mx_Dialog:has(.mx_TabbedView) > .mx_SpaceSettingsDialog,
.mx_Dialog:has(.mx_TabbedView) > .mx_RoomSettingsDialog,
.mx_Dialog:has(.mx_TabbedView) > [role="dialog"],
.mx_Dialog:has(.mx_TabbedView) > div:not(.mx_Dialog_header):not(.mx_Dialog_buttons):not([data-focus-guard]):not([tabindex="0"]),
.mx_Dialog:has(.mx_TabbedView) > form {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.mx_SettingsDialog_toastContainer {
  pointer-events: none !important;
}

.mx_SettingsDialog_toastContainer:not(:empty) .mx_Toast {
  pointer-events: auto !important;
}

.mx_SettingsDialog_content {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Flatten ALL other inner dialog wrappers (Eliminate secondary boxes & nested cards) */
.mx_CreateRoomDialog,
.mx_InviteDialog,
.mx_InviteDialog_other,
.mx_InviteDialog_transfer,
.mx_Dialog .mx_Dialog_fixedWidth,
.mx_Dialog_fixedWidth,
.mx_CompoundDialog_form,
.mx_CompoundDialog_content,
.mx_Dialog_content,
.mx_VerificationRequestDialog,
.mx_DeviceVerifyDialog,
.sc-verification-dialog,
.mx_AccessSecretStorageDialog,
.mx_CreateSecretStorageDialog,
.mx_RestoreKeyBackupDialog,
.mx_SetupEncryptionDialog,
.mx_FeedbackDialog,
.mx_ServerNotice_dialog,
.mx_ExportDialog,
.mx_DevTools,
.mx_KeyboardShortcuts,
.mx_ConfirmUserActionDialog,
.mx_LeaveSpaceDialog,
.mx_QuestionDialog,
.mx_InfoDialog,
.mx_ErrorDialog,
.mx_BulkRedactDialog,
.mx_AnalyticsLearnMoreDialog,
.mx_AppDownloadDialog,
.mx_TermsDialog,
.mx_ChangelogDialog,
.mx_Dialog_section,
.mx_Dialog_contentWrapper,
.mx_AccessSecretStorageDialog_primaryContainer,
.sc-verification-helper-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 4. Integrated edge-to-edge modal header across ALL dialogs */
.mx_Dialog_header,
.mx_CompoundDialog_header {
  padding: 16px 24px !important;
  margin: 0 !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.cpd-theme-dark .mx_Dialog_header,
body.theme-dark .mx_Dialog_header,
body:not(.cpd-theme-light):not(.theme-light) .mx_Dialog_header,
body.cpd-theme-dark .mx_CompoundDialog_header,
body.theme-dark .mx_CompoundDialog_header,
body:not(.cpd-theme-light):not(.theme-light) .mx_CompoundDialog_header {
  border-bottom: 1px solid #27272a !important;
  background-color: #18191c !important;
}

body.cpd-theme-light .mx_Dialog_header,
body.theme-light .mx_Dialog_header,
body.cpd-theme-light .mx_CompoundDialog_header,
body.theme-light .mx_CompoundDialog_header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
}

.mx_Dialog_title,
.mx_Dialog_titleWithIcon,
.mx_CompoundDialog_header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Universal cancel / close button */
.mx_Dialog_cancelButton,
.mx_CompoundDialog_cancelButton {
  top: 13px !important;
  right: 20px !important;
  position: absolute !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.85 !important;
  z-index: 50 !important;
  overflow: hidden !important;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease !important;
}

body.cpd-theme-dark .mx_Dialog_cancelButton,
body.theme-dark .mx_Dialog_cancelButton,
body:not(.cpd-theme-light):not(.theme-light) .mx_Dialog_cancelButton,
body.cpd-theme-dark .mx_CompoundDialog_cancelButton,
body.theme-dark .mx_CompoundDialog_cancelButton,
body:not(.cpd-theme-light):not(.theme-light) .mx_CompoundDialog_cancelButton {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

body.cpd-theme-light .mx_Dialog_cancelButton,
body.theme-light .mx_Dialog_cancelButton,
body.cpd-theme-light .mx_CompoundDialog_cancelButton,
body.theme-light .mx_CompoundDialog_cancelButton {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.mx_Dialog_cancelButton:hover,
.mx_CompoundDialog_cancelButton:hover {
  opacity: 1 !important;
  transform: scale(1.06) !important;
}

body.cpd-theme-dark .mx_Dialog_cancelButton:hover,
body.theme-dark .mx_Dialog_cancelButton:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_Dialog_cancelButton:hover,
body.cpd-theme-dark .mx_CompoundDialog_cancelButton:hover,
body.theme-dark .mx_CompoundDialog_cancelButton:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_CompoundDialog_cancelButton:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

body.cpd-theme-light .mx_Dialog_cancelButton:hover,
body.theme-light .mx_Dialog_cancelButton:hover,
body.cpd-theme-light .mx_CompoundDialog_cancelButton:hover,
body.theme-light .mx_CompoundDialog_cancelButton:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Perfect centering of the X icon inside the cancel button */
.mx_Dialog_cancelButton::before,
.mx_CompoundDialog_cancelButton::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background-color: var(--cpd-color-icon-secondary, #a1a1aa) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") no-repeat center center / 16px 16px !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") no-repeat center center / 16px 16px !important;
  transition: background-color 0.15s ease !important;
}

.mx_Dialog_cancelButton:hover::before,
.mx_CompoundDialog_cancelButton:hover::before {
  background-color: var(--cpd-color-icon-primary, #ffffff) !important;
}

body.cpd-theme-light .mx_Dialog_cancelButton::before,
body.theme-light .mx_Dialog_cancelButton::before,
body.cpd-theme-light .mx_CompoundDialog_cancelButton::before,
body.theme-light .mx_CompoundDialog_cancelButton::before {
  background-color: var(--cpd-color-icon-secondary, #52525b) !important;
}

body.cpd-theme-light .mx_Dialog_cancelButton:hover::before,
body.theme-light .mx_Dialog_cancelButton:hover::before,
body.cpd-theme-light .mx_CompoundDialog_cancelButton:hover::before,
body.theme-light .mx_CompoundDialog_cancelButton:hover::before {
  background-color: var(--cpd-color-icon-primary, #18181b) !important;
}

.mx_Dialog_cancelButton::after,
.mx_CompoundDialog_cancelButton::after {
  display: none !important;
}

/* 5. Universal Non-Nested Modal Content Area */
.mx_Dialog:not(:has(.mx_TabbedView)) .mx_Dialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) .mx_CompoundDialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) .mx_CompoundDialog_form,
.mx_Dialog:not(:has(.mx_TabbedView)) .mx_InviteDialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_CreateRoomDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_InviteDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_InviteDialog_other,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_InviteDialog_transfer,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_Dialog_fixedWidth,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_VerificationRequestDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_DeviceVerifyDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .sc-verification-dialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_AccessSecretStorageDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_CreateSecretStorageDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_RestoreKeyBackupDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_FeedbackDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_ServerNotice_dialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_ExportDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_DevTools,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_KeyboardShortcuts,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_ConfirmUserActionDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_LeaveSpaceDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_QuestionDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_InfoDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_ErrorDialog,
.mx_Dialog:not(:has(.mx_TabbedView)) > .mx_BulkRedactDialog {
  margin: 0 !important;
  box-sizing: border-box !important;
}

.mx_Dialog:not(:has(.mx_TabbedView)) .mx_Dialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) #mx_Dialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) .mx_CompoundDialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) .mx_InviteDialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)) [role="dialog"] > div:not(.mx_Dialog_header):not(.mx_Dialog_buttons):not(.mx_Dialog_cancelButton):not([data-focus-guard]):not(.mx_UserSettingsDialog):not(.mx_SpaceSettingsDialog):not(.mx_RoomSettingsDialog):not(.mx_TabbedView):not(.mx_EncryptionPanel):not(.mx_VerificationPanel),
.mx_Dialog:not(:has(.mx_TabbedView)) [role="dialog"] > form:not(.mx_Dialog_header):not(.mx_Dialog_buttons):not(.mx_Dialog_cancelButton),
.mx_Dialog:not(:has(.mx_TabbedView)) [role="dialog"] > p:not(.mx_Dialog_header),
.mx_Dialog:not(:has(.mx_TabbedView)) [role="dialog"] > span:not(.mx_Dialog_header),
.mx_Dialog:not(:has(.mx_TabbedView)):not(:has(.mx_Dialog_content)):not(:has(.mx_CompoundDialog_content)):not(:has(.mx_InviteDialog_content)) > form,
.mx_Dialog:not(:has(.mx_TabbedView)):not(:has(.mx_Dialog_content)):not(:has(.mx_CompoundDialog_content)):not(:has(.mx_InviteDialog_content)):not(:has(form)) > div:not(.mx_Dialog_header):not(.mx_Dialog_buttons):not([data-focus-guard]):not([role="dialog"]):not(.mx_InviteDialog_other):not(.mx_InviteDialog_transfer) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
}

/* Modals without separate footer buttons get full 24px bottom padding */
.mx_Dialog:not(:has(.mx_TabbedView)):not(:has(.mx_Dialog_buttons)):not(:has(.mx_CompoundDialog_footer)) .mx_Dialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)):not(:has(.mx_Dialog_buttons)):not(:has(.mx_CompoundDialog_footer)) #mx_Dialog_content,
.mx_Dialog:not(:has(.mx_TabbedView)):not(:has(.mx_Dialog_buttons)):not(:has(.mx_CompoundDialog_footer)) [role="dialog"] > div:not(.mx_Dialog_header):not(.mx_Dialog_buttons):not(.mx_Dialog_cancelButton):not([data-focus-guard]):not(.mx_UserSettingsDialog):not(.mx_SpaceSettingsDialog):not(.mx_RoomSettingsDialog):not(.mx_TabbedView):not(.mx_EncryptionPanel):not(.mx_VerificationPanel),
.mx_Dialog:not(:has(.mx_TabbedView)):not(:has(.mx_Dialog_buttons)):not(:has(.mx_CompoundDialog_footer)) [role="dialog"] > form:not(.mx_Dialog_header):not(.mx_Dialog_buttons):not(.mx_Dialog_cancelButton) {
  padding-bottom: 24px !important;
}

/* 6. Universal Integrated Edge-to-Edge Modal Footer */
.mx_Dialog_buttons,
.mx_CompoundDialog_footer,
.mx_ModalWidgetDialog_buttons,
.mx_UnpinAllDialog_buttons,
.mx_JoinRuleDialogButtons,
.mx_ManageRestrictedJoinRuleDialog_footer_buttons,
.mx_Dialog [role="dialog"] > div.mx_Dialog_buttons {
  padding: 16px 24px !important;
  margin: 0 !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

body.cpd-theme-dark .mx_Dialog_buttons,
body.theme-dark .mx_Dialog_buttons,
body:not(.cpd-theme-light):not(.theme-light) .mx_Dialog_buttons,
body.cpd-theme-dark .mx_CompoundDialog_footer,
body.theme-dark .mx_CompoundDialog_footer,
body:not(.cpd-theme-light):not(.theme-light) .mx_CompoundDialog_footer {
  border-top: 1px solid #27272a !important;
  background-color: #151619 !important;
}

body.cpd-theme-light .mx_Dialog_buttons,
body.theme-light .mx_Dialog_buttons,
body.cpd-theme-light .mx_CompoundDialog_footer,
body.theme-light .mx_CompoundDialog_footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #fafafa !important;
}

/* 4. Tabbed view fill and clean tabs structure */
.mx_TabbedView,
.mx_TabbedView.mx_TabbedView_tabsOnLeft,
.mx_UserSettingsDialog .mx_TabbedView,
.mx_SpaceSettingsDialog .mx_TabbedView,
.mx_RoomSettingsDialog .mx_TabbedView {
  flex: 1 1 auto !important;
  display: flex !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

body.cpd-theme-dark .mx_TabbedView,
body.theme-dark .mx_TabbedView,
body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView {
  background-color: #18191c !important;
}

body.cpd-theme-light .mx_TabbedView,
body.theme-light .mx_TabbedView {
  background-color: #ffffff !important;
}

@media (min-width: 768px) {
  .mx_TabbedView,
  .mx_TabbedView.mx_TabbedView_tabsOnLeft,
  .mx_UserSettingsDialog .mx_TabbedView,
  .mx_SpaceSettingsDialog .mx_TabbedView,
  .mx_RoomSettingsDialog .mx_TabbedView {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  /* The actual tabs column list (sidebar) */
  .mx_TabbedView_tabLabels,
  .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    flex: 0 0 230px !important;
    flex-shrink: 0 !important;
    padding: 16px 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    list-style: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
  }

  body.cpd-theme-dark .mx_TabbedView_tabLabels,
  body.cpd-theme-dark .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels,
  body.theme-dark .mx_TabbedView_tabLabels,
  body.theme-dark .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels,
  body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView_tabLabels {
    border-right: 1px solid #27272a !important;
    background: #111215 !important;
    background-color: #111215 !important;
    border-bottom: none !important;
  }

  body.cpd-theme-light .mx_TabbedView_tabLabels,
  body.cpd-theme-light .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels,
  body.theme-light .mx_TabbedView_tabLabels,
  body.theme-light .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-bottom: none !important;
  }

  .mx_TabbedView_tabPanel,
  .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabPanel {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
    overflow: hidden !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  body.cpd-theme-dark .mx_TabbedView_tabPanel,
  body.theme-dark .mx_TabbedView_tabPanel,
  body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView_tabPanel {
    background-color: #18191c !important;
    color: #f4f4f5 !important;
  }

  body.cpd-theme-light .mx_TabbedView_tabPanel,
  body.theme-light .mx_TabbedView_tabPanel {
    background-color: #ffffff !important;
    color: #0f172a !important;
  }

  .mx_TabbedView_tabPanelContent,
  .mx_TabbedView_tabPanel .mx_AutoHideScrollbar,
  .mx_TabbedView_tabPanelContent.mx_AutoHideScrollbar,
  div[class*="TabbedView_tabPanelContent"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 24px 32px 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Explicit visible and elegant scrollbar for Settings Tab content */
  .mx_TabbedView_tabPanelContent,
  .mx_TabbedView_tabPanel .mx_AutoHideScrollbar,
  div[class*="TabbedView_tabPanelContent"] {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent !important;
  }

  body.cpd-theme-light .mx_TabbedView_tabPanelContent,
  body.theme-light .mx_TabbedView_tabPanelContent,
  body[class*="light"] .mx_TabbedView_tabPanelContent,
  body.cpd-theme-light .mx_TabbedView_tabPanel .mx_AutoHideScrollbar,
  body.theme-light .mx_TabbedView_tabPanel .mx_AutoHideScrollbar,
  body[class*="light"] .mx_TabbedView_tabPanel .mx_AutoHideScrollbar,
  body.cpd-theme-light div[class*="TabbedView_tabPanelContent"],
  body.theme-light div[class*="TabbedView_tabPanelContent"],
  body[class*="light"] div[class*="TabbedView_tabPanelContent"] {
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent !important;
  }

  .mx_TabbedView_tabPanelContent::-webkit-scrollbar,
  .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar,
  div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
  }

  .mx_TabbedView_tabPanelContent::-webkit-scrollbar-track,
  .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-track,
  div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb,
  .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb,
  div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb {
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, 0.28) !important;
  }

  .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb:hover,
  .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb:hover,
  div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45) !important;
  }

  body.cpd-theme-light .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb,
  body.theme-light .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb,
  body[class*="light"] .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb,
  body.cpd-theme-light .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb,
  body.theme-light .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb,
  body[class*="light"] .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb,
  body.cpd-theme-light div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb,
  body.theme-light div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb,
  body[class*="light"] div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.28) !important;
  }

  body.cpd-theme-light .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb:hover,
  body.theme-light .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb:hover,
  body[class*="light"] .mx_TabbedView_tabPanelContent::-webkit-scrollbar-thumb:hover,
  body.cpd-theme-light .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb:hover,
  body.theme-light .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb:hover,
  body[class*="light"] .mx_TabbedView_tabPanel .mx_AutoHideScrollbar::-webkit-scrollbar-thumb:hover,
  body.cpd-theme-light div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb:hover,
  body.theme-light div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb:hover,
  body[class*="light"] div[class*="TabbedView_tabPanelContent"]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.45) !important;
  }
}

.mx_TabbedView_tabLabel {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.mx_TabbedView_tabLabel * {
  pointer-events: none;
}

body.cpd-theme-dark .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active),
body.theme-dark .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active),
body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active) {
  color: var(--cpd-color-text-secondary, #94a3b8) !important;
}

body.cpd-theme-dark .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active):hover,
body.theme-dark .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active):hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active):hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--cpd-color-text-primary, #ffffff) !important;
}

body.cpd-theme-light .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active),
body.theme-light .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active) {
  color: var(--cpd-color-text-secondary, #64748b) !important;
}

body.cpd-theme-light .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active):hover,
body.theme-light .mx_TabbedView_tabLabel:not(.mx_TabbedView_tabLabel_active):hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--cpd-color-text-primary, #0f172a) !important;
}

/* Active tab pill */
body.cpd-theme-dark .mx_TabbedView_tabLabel_active,
body.theme-dark .mx_TabbedView_tabLabel_active,
body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView_tabLabel_active {
  background-color: rgba(16, 185, 129, 0.16) !important;
  color: #10b981 !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_TabbedView_tabLabel_active,
body.theme-light .mx_TabbedView_tabLabel_active {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

/* Tab icons */
.mx_TabbedView_tabLabel .mx_TabbedView_maskedIcon,
.mx_TabbedView_tabLabel svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.mx_TabbedView_tabLabel .mx_TabbedView_maskedIcon:before {
  width: 18px !important;
  height: 18px !important;
  -webkit-mask-size: 18px !important;
  mask-size: 18px !important;
  background-color: currentColor !important;
}

body.cpd-theme-dark .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before,
body.theme-dark .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before,
body:not(.cpd-theme-light):not(.theme-light) .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
  background-color: #10b981 !important;
}

body.cpd-theme-light .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before,
body.theme-light .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
  background-color: #059669 !important;
}

.mx_TabbedView_tabLabel_text {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

/* Ensure SettingsTab and its content take full available width properly */
.mx_SettingsTab,
.mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_SpacePreferencesDialog .mx_TabbedView .mx_SettingsTab,
.mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab,
.mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  min-height: min-content !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 48px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  flex: 1 1 100% !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.mx_SettingsTab_sections,
.mx_SettingsSection,
.mx_SettingsSubsection,
.mx_SettingsSection_subSections,
.mx_SettingsSubsection_content,
.mx_SettingsSubsection_content_newUi,
.mx_SettingsTab_section {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

/* Settings Headings & Subsections */
.mx_SettingsTab_heading,
.mx_SettingsSubsection_heading,
.mx_SettingsSubsectionHeading_heading,
.mx_SettingsTab h1,
.mx_SettingsTab h2,
.mx_SettingsTab h3,
.mx_SettingsTab h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin: 18px 0 6px 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.mx_SettingsSubsection:first-child .mx_SettingsSubsection_heading,
.mx_SettingsSubsection:first-child .mx_SettingsSubsectionHeading_heading,
.mx_SettingsTab_heading:first-child {
  margin-top: 0 !important;
}

.mx_SettingsSubsection_content,
.mx_SettingsSubsection_content_newUi {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-top: 6px !important;
  gap: 14px !important;
}

.mx_SettingsTab .mx_Field,
.mx_SettingsSection .mx_Field,
.mx_SettingsSubsection .mx_Field {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

.mx_SettingsTab .mx_Field:not(:has(label:not(:empty))),
.mx_SettingsSection .mx_Field:not(:has(label:not(:empty))),
.mx_SettingsSubsection .mx_Field:not(:has(label:not(:empty))) {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

body.cpd-theme-dark .mx_SettingsTab_heading,
body.theme-dark .mx_SettingsTab_heading,
body.cpd-theme-dark .mx_SettingsSubsection_heading,
body.theme-dark .mx_SettingsSubsection_heading,
body.cpd-theme-dark .mx_SettingsTab h1,
body.theme-dark .mx_SettingsTab h1,
body.cpd-theme-dark .mx_SettingsTab h2,
body.theme-dark .mx_SettingsTab h2,
body.cpd-theme-dark .mx_SettingsTab h3,
body.theme-dark .mx_SettingsTab h3,
body.cpd-theme-dark .mx_SettingsTab h4,
body.theme-dark .mx_SettingsTab h4,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab_heading,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_heading,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab h1,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab h2,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab h3,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab h4 {
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_SettingsTab_heading,
body.theme-light .mx_SettingsTab_heading,
body.cpd-theme-light .mx_SettingsSubsection_heading,
body.theme-light .mx_SettingsSubsection_heading,
body.cpd-theme-light .mx_SettingsTab h1,
body.theme-light .mx_SettingsTab h1,
body.cpd-theme-light .mx_SettingsTab h2,
body.theme-light .mx_SettingsTab h2,
body.cpd-theme-light .mx_SettingsTab h3,
body.theme-light .mx_SettingsTab h3,
body.cpd-theme-light .mx_SettingsTab h4,
body.theme-light .mx_SettingsTab h4,
body[class*="light"] .mx_SettingsTab_heading,
body[class*="light"] .mx_SettingsSubsection_heading,
body[class*="light"] .mx_SettingsTab h1,
body[class*="light"] .mx_SettingsTab h2,
body[class*="light"] .mx_SettingsTab h3,
body[class*="light"] .mx_SettingsTab h4,
html[class*="light"] .mx_SettingsTab_heading,
html[class*="light"] .mx_SettingsSubsection_heading,
html[class*="light"] .mx_SettingsTab h1,
html[class*="light"] .mx_SettingsTab h2,
html[class*="light"] .mx_SettingsTab h3,
html[class*="light"] .mx_SettingsTab h4 {
  color: #0f172a !important;
}

/* Settings Descriptions, Microcopy & Universal Text */
.mx_SettingsSubsection_description,
.mx_SettingsSubsection_text,
.mx_SettingsTab_subheading,
.mx_SettingsTab p,
.mx_SettingsTab .mx_SettingsSubsection p,
.mx_SettingsTab_subsectionText,
.mx_SettingsTab_section > p {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

body.cpd-theme-dark .mx_SettingsSubsection_description,
body.theme-dark .mx_SettingsSubsection_description,
body.cpd-theme-dark .mx_SettingsSubsection_text,
body.theme-dark .mx_SettingsSubsection_text,
body.cpd-theme-dark .mx_SettingsTab_subheading,
body.theme-dark .mx_SettingsTab_subheading,
body.cpd-theme-dark .mx_SettingsTab p,
body.theme-dark .mx_SettingsTab p,
body.cpd-theme-dark .mx_SettingsTab_subsectionText,
body.theme-dark .mx_SettingsTab_subsectionText,
body.cpd-theme-dark .mx_SettingsTab_section > p,
body.theme-dark .mx_SettingsTab_section > p,
body.cpd-theme-dark .mx_UserProfileSettings > div,
body.theme-dark .mx_UserProfileSettings > div,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_description,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_text,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab_subheading,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab p,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab_subsectionText,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab_section > p,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings > div {
  color: #94a3b8 !important;
}

body.cpd-theme-light .mx_SettingsSubsection_description,
body.theme-light .mx_SettingsSubsection_description,
body.cpd-theme-light .mx_SettingsSubsection_text,
body.theme-light .mx_SettingsSubsection_text,
body.cpd-theme-light .mx_SettingsTab_subheading,
body.theme-light .mx_SettingsTab_subheading,
body.cpd-theme-light .mx_SettingsTab p,
body.theme-light .mx_SettingsTab p,
body.cpd-theme-light .mx_SettingsTab_subsectionText,
body.theme-light .mx_SettingsTab_subsectionText,
body.cpd-theme-light .mx_SettingsTab_section > p,
body.theme-light .mx_SettingsTab_section > p,
body.cpd-theme-light .mx_UserProfileSettings > div,
body.theme-light .mx_UserProfileSettings > div,
body[class*="light"] .mx_SettingsSubsection_description,
body[class*="light"] .mx_SettingsSubsection_text,
body[class*="light"] .mx_SettingsTab_subheading,
body[class*="light"] .mx_SettingsTab p,
body[class*="light"] .mx_SettingsTab_subsectionText,
body[class*="light"] .mx_SettingsTab_section > p,
body[class*="light"] .mx_UserProfileSettings > div,
html[class*="light"] .mx_SettingsSubsection_description,
html[class*="light"] .mx_SettingsSubsection_text,
html[class*="light"] .mx_SettingsTab_subheading,
html[class*="light"] .mx_SettingsTab p,
html[class*="light"] .mx_SettingsTab_subsectionText,
html[class*="light"] .mx_SettingsTab_section > p,
html[class*="light"] .mx_UserProfileSettings > div {
  color: #334155 !important;
  font-weight: 450 !important;
}

/* User Profile Specifics */
body.cpd-theme-dark .mx_UserProfileSettings_profile_controls_userId_label,
body.theme-dark .mx_UserProfileSettings_profile_controls_userId_label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_controls_userId_label {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_controls_userId_label,
body.theme-light .mx_UserProfileSettings_profile_controls_userId_label,
body[class*="light"] .mx_UserProfileSettings_profile_controls_userId_label,
html[class*="light"] .mx_UserProfileSettings_profile_controls_userId_label {
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Copyable Text Box across settings */
.mx_CopyableText,
.mx_CopyableText.mx_CopyableText_border,
.mx_UserProfileSettings_profile_controls_userId .mx_CopyableText,
.theme-dark .mx_CopyableText,
.cpd-theme-dark .mx_CopyableText,
body.cpd-theme-dark .mx_CopyableText,
body.cpd-theme-dark .mx_CopyableText.mx_CopyableText_border,
body.theme-dark .mx_CopyableText,
body.theme-dark .mx_CopyableText.mx_CopyableText_border,
html.cpd-theme-dark .mx_CopyableText,
html.theme-dark .mx_CopyableText,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText.mx_CopyableText_border {
  background-color: #111215 !important;
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  min-height: 46px !important;
  padding: 4px 6px 4px 14px !important;
  color: #f4f4f5 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  gap: 12px !important;
}

.theme-dark .mx_CopyableText *,
.cpd-theme-dark .mx_CopyableText *,
body.cpd-theme-dark .mx_CopyableText *,
body.theme-dark .mx_CopyableText *,
html.cpd-theme-dark .mx_CopyableText *,
html.theme-dark .mx_CopyableText *,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText * {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
}

.theme-light .mx_CopyableText,
.cpd-theme-light .mx_CopyableText,
.theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText,
.cpd-theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText,
body.cpd-theme-light .mx_CopyableText,
body.cpd-theme-light .mx_CopyableText.mx_CopyableText_border,
body.theme-light .mx_CopyableText,
body.theme-light .mx_CopyableText.mx_CopyableText_border,
body[class*="light"] .mx_CopyableText,
body[class*="light"] .mx_CopyableText.mx_CopyableText_border,
html[class*="light"] .mx_CopyableText,
html[class*="light"] .mx_CopyableText.mx_CopyableText_border,
html.cpd-theme-light .mx_CopyableText,
html.theme-light .mx_CopyableText {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  min-height: 46px !important;
  padding: 4px 6px 4px 14px !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  gap: 12px !important;
}

.theme-light .mx_CopyableText *,
.cpd-theme-light .mx_CopyableText *,
body.cpd-theme-light .mx_CopyableText *,
body.theme-light .mx_CopyableText *,
body[class*="light"] .mx_CopyableText *,
html[class*="light"] .mx_CopyableText *,
html.cpd-theme-light .mx_CopyableText *,
html.theme-light .mx_CopyableText * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Copy Button */
.mx_CopyableText .mx_CopyableText_copyButton,
.mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton,
.theme-dark .mx_CopyableText .mx_CopyableText_copyButton,
.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton,
body.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton,
body.theme-dark .mx_CopyableText .mx_CopyableText_copyButton,
html.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton,
html.theme-dark .mx_CopyableText .mx_CopyableText_copyButton,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText .mx_CopyableText_copyButton {
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #3f3f46 !important;
  background-color: #27272a !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  transition: all 0.15s ease !important;
}

.mx_CopyableText .mx_CopyableText_copyButton:hover,
.mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:hover,
.theme-dark .mx_CopyableText .mx_CopyableText_copyButton:hover,
.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton:hover,
body.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton:hover,
body.theme-dark .mx_CopyableText .mx_CopyableText_copyButton:hover,
html.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton:hover,
html.theme-dark .mx_CopyableText .mx_CopyableText_copyButton:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText .mx_CopyableText_copyButton:hover {
  background-color: #3f3f46 !important;
  border-color: #52525b !important;
  opacity: 1 !important;
}

.mx_CopyableText .mx_CopyableText_copyButton:active,
.mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:active {
  transform: scale(0.95) !important;
}

.mx_CopyableText .mx_CopyableText_copyButton:before,
.mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:before,
.theme-dark .mx_CopyableText .mx_CopyableText_copyButton:before,
.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton:before,
body.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton:before,
body.theme-dark .mx_CopyableText .mx_CopyableText_copyButton:before,
html.cpd-theme-dark .mx_CopyableText .mx_CopyableText_copyButton:before,
html.theme-dark .mx_CopyableText .mx_CopyableText_copyButton:before,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_CopyableText .mx_CopyableText_copyButton:before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  background-color: #f4f4f5 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z'/%3E%3Cpath fill='%23000000' d='M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9Zm2 0v9h9v-9h-9Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z'/%3E%3Cpath fill='%23000000' d='M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9Zm2 0v9h9v-9h-9Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 18px 18px !important;
  mask-size: 18px 18px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.theme-light .mx_CopyableText .mx_CopyableText_copyButton,
.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton,
.theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton,
.cpd-theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton,
body.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton,
body.theme-light .mx_CopyableText .mx_CopyableText_copyButton,
body[class*="light"] .mx_CopyableText .mx_CopyableText_copyButton,
html[class*="light"] .mx_CopyableText .mx_CopyableText_copyButton,
html.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton,
html.theme-light .mx_CopyableText .mx_CopyableText_copyButton {
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  transition: all 0.15s ease !important;
}

.theme-light .mx_CopyableText .mx_CopyableText_copyButton:hover,
.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton:hover,
.theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:hover,
.cpd-theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:hover,
body.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton:hover,
body.theme-light .mx_CopyableText .mx_CopyableText_copyButton:hover,
body[class*="light"] .mx_CopyableText .mx_CopyableText_copyButton:hover,
html[class*="light"] .mx_CopyableText .mx_CopyableText_copyButton:hover,
html.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton:hover,
html.theme-light .mx_CopyableText .mx_CopyableText_copyButton:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  opacity: 1 !important;
}

.theme-light .mx_CopyableText .mx_CopyableText_copyButton:before,
.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton:before,
.theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:before,
.cpd-theme-light .mx_UserProfileSettings_profile_controls_userId .mx_CopyableText_copyButton:before,
body.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton:before,
body.theme-light .mx_CopyableText .mx_CopyableText_copyButton:before,
body[class*="light"] .mx_CopyableText .mx_CopyableText_copyButton:before,
html[class*="light"] .mx_CopyableText .mx_CopyableText_copyButton:before,
html.cpd-theme-light .mx_CopyableText .mx_CopyableText_copyButton:before,
html.theme-light .mx_CopyableText .mx_CopyableText_copyButton:before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  background-color: #0f172a !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z'/%3E%3Cpath fill='%23000000' d='M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9Zm2 0v9h9v-9h-9Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z'/%3E%3Cpath fill='%23000000' d='M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9Zm2 0v9h9v-9h-9Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 18px 18px !important;
  mask-size: 18px 18px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

.mx_CopyableText_copyButton * {
  pointer-events: none !important;
}

/* ==========================================================================
   User Profile Settings: Display Name Edit-In-Place & Action Buttons
   ========================================================================== */

.mx_UserProfileSettings_profile_displayName,
.mx_UserProfileSettings_profile_displayName form {
  width: 100% !important;
}

.mx_UserProfileSettings_profile_displayName ._controls_1h4nb_17,
.mx_UserProfileSettings_profile_displayName [class*="_controls_"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.mx_UserProfileSettings_profile_displayName ._button-group_1h4nb_27,
.mx_UserProfileSettings_profile_displayName [class*="_button-group_"],
._button-group_1h4nb_27 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  inset-block-start: 0 !important;
}

/* User Display Name Input Field Polish */
body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName input,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName input,
body.theme-dark .mx_UserProfileSettings_profile_displayName input,
body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName ._control_9gon8_18,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName ._control_9gon8_18,
body.theme-dark .mx_UserProfileSettings_profile_displayName ._control_9gon8_18 {
  background-color: #131417 !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
  border-radius: 8px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  padding: 8px 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName input:focus,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName input:focus,
body.theme-dark .mx_UserProfileSettings_profile_displayName input:focus,
body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName ._control_9gon8_18:focus,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName ._control_9gon8_18:focus,
body.theme-dark .mx_UserProfileSettings_profile_displayName ._control_9gon8_18:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
  outline: none !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName input,
body.theme-light .mx_UserProfileSettings_profile_displayName input,
body[class*="light"] .mx_UserProfileSettings_profile_displayName input,
body.cpd-theme-light .mx_UserProfileSettings_profile_displayName ._control_9gon8_18,
body.theme-light .mx_UserProfileSettings_profile_displayName ._control_9gon8_18,
body[class*="light"] .mx_UserProfileSettings_profile_displayName ._control_9gon8_18 {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  padding: 8px 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName input:focus,
body.theme-light .mx_UserProfileSettings_profile_displayName input:focus,
body[class*="light"] .mx_UserProfileSettings_profile_displayName input:focus,
body.cpd-theme-light .mx_UserProfileSettings_profile_displayName ._control_9gon8_18:focus,
body.theme-light .mx_UserProfileSettings_profile_displayName ._control_9gon8_18:focus,
body[class*="light"] .mx_UserProfileSettings_profile_displayName ._control_9gon8_18:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}

/* Edit-In-Place Action Buttons (Save & Cancel) Sizing & Structure */
.mx_UserProfileSettings_profile_displayName ._button-group_1h4nb_27 button,
.mx_UserProfileSettings_profile_displayName [class*="_button-group_"] button,
.mx_UserProfileSettings_profile_displayName button[type="submit"],
.mx_UserProfileSettings_profile_displayName button[type="reset"],
._button-group_1h4nb_27 button {
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

/* Proper Icon Sizing: Ensure icons are prominently sized and NOT tiny */
.mx_UserProfileSettings_profile_displayName ._button-group_1h4nb_27 button svg,
.mx_UserProfileSettings_profile_displayName [class*="_button-group_"] button svg,
.mx_UserProfileSettings_profile_displayName button[type="submit"] svg,
.mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
._button-group_1h4nb_27 button svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
  flex-shrink: 0 !important;
  stroke: none !important;
  fill: currentColor !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Save Button (Dark Mode - Active / Enabled) */
body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled),
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled),
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled),
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="submit"]:not(:disabled),
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled),
body.theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled),
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[data-kind="primary"]:not(:disabled),
body.cpd-theme-dark ._button-group_1h4nb_27 button[data-kind="primary"]:not(:disabled),
body.theme-dark ._button-group_1h4nb_27 button[data-kind="primary"]:not(:disabled) {
  background-color: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):hover,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):hover,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):hover,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):hover,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):hover,
body.theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):active,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):active,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):active,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):active,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):active,
body.theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):active {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: scale(0.96) !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled) svg,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled) svg,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled) svg,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="submit"]:not(:disabled) svg,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled) svg,
body.theme-dark ._button-group_1h4nb_27 button[type="submit"]:not(:disabled) svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Save Button (Dark Mode - Disabled) */
body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="submit"]:disabled,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="submit"]:disabled,
body.theme-dark ._button-group_1h4nb_27 button[type="submit"]:disabled {
  background-color: #1e2025 !important;
  border: 1px solid #3f3f46 !important;
  color: #71717a !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled svg,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled svg,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled svg,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="submit"]:disabled svg,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="submit"]:disabled svg,
body.theme-dark ._button-group_1h4nb_27 button[type="submit"]:disabled svg {
  color: #71717a !important;
  fill: #71717a !important;
}

/* Save Button (Light Mode - Active / Enabled) */
body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled),
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled),
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled),
body.cpd-theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled),
body.theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled),
body[class*="light"] ._button-group_1h4nb_27 button[type="submit"]:not(:disabled),
body.cpd-theme-light ._button-group_1h4nb_27 button[data-kind="primary"]:not(:disabled),
body.theme-light ._button-group_1h4nb_27 button[data-kind="primary"]:not(:disabled),
body[class*="light"] ._button-group_1h4nb_27 button[data-kind="primary"]:not(:disabled) {
  background-color: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):hover,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):hover,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):hover,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):hover,
body.theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):hover,
body[class*="light"] ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):active,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):active,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled):active,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):active,
body.theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):active,
body[class*="light"] ._button-group_1h4nb_27 button[type="submit"]:not(:disabled):active {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: scale(0.96) !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled) svg,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled) svg,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="submit"]:not(:disabled) svg,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled) svg,
body.theme-light ._button-group_1h4nb_27 button[type="submit"]:not(:disabled) svg,
body[class*="light"] ._button-group_1h4nb_27 button[type="submit"]:not(:disabled) svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Save Button (Light Mode - Disabled) */
body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="submit"]:disabled,
body.theme-light ._button-group_1h4nb_27 button[type="submit"]:disabled,
body[class*="light"] ._button-group_1h4nb_27 button[type="submit"]:disabled {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled svg,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled svg,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="submit"]:disabled svg,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="submit"]:disabled svg,
body.theme-light ._button-group_1h4nb_27 button[type="submit"]:disabled svg,
body[class*="light"] ._button-group_1h4nb_27 button[type="submit"]:disabled svg {
  color: #94a3b8 !important;
  fill: #94a3b8 !important;
}

/* Cancel Button (Dark Mode) */
body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="reset"],
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"],
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"],
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="reset"],
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="reset"],
body.theme-dark ._button-group_1h4nb_27 button[type="reset"] {
  background-color: #1e2025 !important;
  border: 1px solid #3f3f46 !important;
  color: #d4d4d8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="reset"]:hover,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="reset"]:hover,
body.theme-dark ._button-group_1h4nb_27 button[type="reset"]:hover {
  background-color: #27272a !important;
  border-color: #52525b !important;
  color: #ffffff !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="reset"]:active,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"]:active,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"]:active,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="reset"]:active,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="reset"]:active,
body.theme-dark ._button-group_1h4nb_27 button[type="reset"]:active {
  background-color: #32353b !important;
  border-color: #71717a !important;
  transform: scale(0.96) !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="reset"] svg,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="reset"] svg,
body.theme-dark ._button-group_1h4nb_27 button[type="reset"] svg {
  color: #d4d4d8 !important;
  fill: #d4d4d8 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover svg,
body.cpd-theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover svg,
body.theme-dark .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover svg,
body:not(.theme-light):not(.cpd-theme-light) ._button-group_1h4nb_27 button[type="reset"]:hover svg,
body.cpd-theme-dark ._button-group_1h4nb_27 button[type="reset"]:hover svg,
body.theme-dark ._button-group_1h4nb_27 button[type="reset"]:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Cancel Button (Light Mode) */
body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"],
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"],
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="reset"],
body.cpd-theme-light ._button-group_1h4nb_27 button[type="reset"],
body.theme-light ._button-group_1h4nb_27 button[type="reset"],
body[class*="light"] ._button-group_1h4nb_27 button[type="reset"] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="reset"]:hover,
body.theme-light ._button-group_1h4nb_27 button[type="reset"]:hover,
body[class*="light"] ._button-group_1h4nb_27 button[type="reset"]:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"]:active,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"]:active,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="reset"]:active,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="reset"]:active,
body.theme-light ._button-group_1h4nb_27 button[type="reset"]:active,
body[class*="light"] ._button-group_1h4nb_27 button[type="reset"]:active {
  background-color: #f1f5f9 !important;
  border-color: #64748b !important;
  transform: scale(0.96) !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="reset"] svg,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="reset"] svg,
body.theme-light ._button-group_1h4nb_27 button[type="reset"] svg,
body[class*="light"] ._button-group_1h4nb_27 button[type="reset"] svg {
  color: #475569 !important;
  fill: #475569 !important;
}

body.cpd-theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover svg,
body.theme-light .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover svg,
body[class*="light"] .mx_UserProfileSettings_profile_displayName button[type="reset"]:hover svg,
body.cpd-theme-light ._button-group_1h4nb_27 button[type="reset"]:hover svg,
body.theme-light ._button-group_1h4nb_27 button[type="reset"]:hover svg,
body[class*="light"] ._button-group_1h4nb_27 button[type="reset"]:hover svg {
  color: #0f172a !important;
  fill: #0f172a !important;
}

.mx_SettingsTab input,
.mx_SettingsTab button,
.mx_SettingsTab select,
.mx_SettingsTab label,
.mx_SettingsTab [role="button"],
.mx_SettingsTab [role="switch"],
.mx_SettingsTab [role="checkbox"],
.mx_SettingsTab [role="radio"] {
  pointer-events: auto !important;
}

/* Settings Form Controls & Inputs (.mx_Field) - Modern Exterior Label Layout */
.mx_Field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.mx_Field:not(:has(label:not(:empty))) {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

/* Dark Mode Theme */
body.cpd-theme-dark .mx_Field,
body.theme-dark .mx_Field,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field {
  border: 1px solid #27272a !important;
  background-color: #111215 !important;
}

body.cpd-theme-dark .mx_Field:focus-within,
body.theme-dark .mx_Field:focus-within,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

body.cpd-theme-dark .mx_Field.mx_Field_invalid,
body.theme-dark .mx_Field.mx_Field_invalid,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field.mx_Field_invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Light Mode Theme */
body.cpd-theme-light .mx_Field,
body.theme-light .mx_Field,
body[class*="light"] .mx_Field,
html[class*="light"] .mx_Field {
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
}

body.cpd-theme-light .mx_Field:focus-within,
body.theme-light .mx_Field:focus-within,
body[class*="light"] .mx_Field:focus-within,
html[class*="light"] .mx_Field:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

body.cpd-theme-light .mx_Field.mx_Field_invalid,
body.theme-light .mx_Field.mx_Field_invalid,
body[class*="light"] .mx_Field.mx_Field_invalid,
html[class*="light"] .mx_Field.mx_Field_invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

/* Exterior Field Labels - Always positioned cleanly above the input box */
.mx_Field label,
.mx_Field .mx_Field_label {
  position: absolute !important;
  left: 0 !important;
  top: -22px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
  transition: color 0.15s ease !important;
}

.mx_Field label:empty {
  display: none !important;
}

body.cpd-theme-dark .mx_Field label,
body.theme-dark .mx_Field label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field label {
  color: #a1a1aa !important;
}

body.cpd-theme-dark .mx_Field:focus-within label,
body.theme-dark .mx_Field:focus-within label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field:focus-within label {
  color: #10b981 !important;
}

body.cpd-theme-dark .mx_Field.mx_Field_invalid label,
body.theme-dark .mx_Field.mx_Field_invalid label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field.mx_Field_invalid label {
  color: #ef4444 !important;
}

body.cpd-theme-light .mx_Field label,
body.theme-light .mx_Field label,
body[class*="light"] .mx_Field label,
html[class*="light"] .mx_Field label {
  color: #475569 !important;
}

body.cpd-theme-light .mx_Field:focus-within label,
body.theme-light .mx_Field:focus-within label,
body[class*="light"] .mx_Field:focus-within label,
html[class*="light"] .mx_Field:focus-within label {
  color: #059669 !important;
}

body.cpd-theme-light .mx_Field.mx_Field_invalid label,
body.theme-light .mx_Field.mx_Field_invalid label,
body[class*="light"] .mx_Field.mx_Field_invalid label,
html[class*="light"] .mx_Field.mx_Field_invalid label {
  color: #ef4444 !important;
}

/* Inputs, Textareas, Selects inside .mx_Field */
.mx_Field input,
.mx_Field textarea,
.mx_Field select {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

body.cpd-theme-dark .mx_Field input,
body.theme-dark .mx_Field input,
body.cpd-theme-dark .mx_Field textarea,
body.theme-dark .mx_Field textarea,
body.cpd-theme-dark .mx_Field select,
body.theme-dark .mx_Field select,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field input,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field textarea,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field select {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_Field input,
body.theme-light .mx_Field input,
body.cpd-theme-light .mx_Field textarea,
body.theme-light .mx_Field textarea,
body.cpd-theme-light .mx_Field select,
body.theme-light .mx_Field select,
body[class*="light"] .mx_Field input,
body[class*="light"] .mx_Field textarea,
body[class*="light"] .mx_Field select,
html[class*="light"] .mx_Field input,
html[class*="light"] .mx_Field textarea,
html[class*="light"] .mx_Field select {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Placeholders */
.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
  opacity: 1 !important;
  font-weight: 400 !important;
}

body.cpd-theme-dark .mx_Field input::placeholder,
body.theme-dark .mx_Field input::placeholder,
body.cpd-theme-dark .mx_Field textarea::placeholder,
body.theme-dark .mx_Field textarea::placeholder,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field input::placeholder,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field textarea::placeholder {
  color: #71717a !important;
  -webkit-text-fill-color: #71717a !important;
}

body.cpd-theme-light .mx_Field input::placeholder,
body.theme-light .mx_Field input::placeholder,
body.cpd-theme-light .mx_Field textarea::placeholder,
body.theme-light .mx_Field textarea::placeholder,
body[class*="light"] .mx_Field input::placeholder,
body[class*="light"] .mx_Field textarea::placeholder,
html[class*="light"] .mx_Field input::placeholder,
html[class*="light"] .mx_Field textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* Disabled Fields */
.mx_Field input:disabled,
.mx_Field textarea:disabled,
.mx_Field select:disabled {
  cursor: not-allowed !important;
}

body.cpd-theme-dark .mx_Field input:disabled,
body.theme-dark .mx_Field input:disabled,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field input:disabled {
  color: #71717a !important;
  -webkit-text-fill-color: #71717a !important;
}

body.cpd-theme-dark .mx_Field:has(input:disabled),
body.theme-dark .mx_Field:has(input:disabled),
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Field:has(input:disabled) {
  background-color: #18191c !important;
  border-color: #27272a !important;
  opacity: 0.75 !important;
}

body.cpd-theme-light .mx_Field input:disabled,
body.theme-light .mx_Field input:disabled,
body[class*="light"] .mx_Field input:disabled,
html[class*="light"] .mx_Field input:disabled {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

body.cpd-theme-light .mx_Field:has(input:disabled),
body.theme-light .mx_Field:has(input:disabled),
body[class*="light"] .mx_Field:has(input:disabled),
html[class*="light"] .mx_Field:has(input:disabled) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  opacity: 0.75 !important;
}

/* Textarea variant */
.mx_Field:has(textarea),
.mx_Field_textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 12px !important;
  align-items: flex-start !important;
}

.mx_Field textarea {
  resize: vertical !important;
  min-height: 60px !important;
  line-height: 1.5 !important;
}

/* Chat Settings Modal: Room Profile & Alias Settings Refinement */
.mx_RoomProfileSettings {
  border-bottom: 1px solid #27272a !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body.cpd-theme-light .mx_RoomProfileSettings,
body.theme-light .mx_RoomProfileSettings,
body[class*="light"] .mx_RoomProfileSettings {
  border-bottom: 1px solid #e2e8f0 !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile_controls {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-inline-end: 0 !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_profile_controls .mx_Field {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

.mx_RoomProfileSettings .mx_AvatarSetting {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mx_RoomProfileSettings .mx_AvatarSetting_avatar {
  height: 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  margin: 0 !important;
  position: relative !important;
}

.mx_RoomProfileSettings .mx_AvatarSetting_avatar > img,
.mx_RoomProfileSettings .mx_AvatarSetting_avatarPlaceholder,
.mx_RoomProfileSettings .mx_BaseAvatar {
  height: 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  border-radius: 50% !important;
  line-height: 56px !important;
  font-size: 22px !important;
}

.mx_RoomProfileSettings .mx_AvatarSetting_avatar .mx_BaseAvatar_initial {
  line-height: 56px !important;
  font-size: 22px !important;
}

.mx_RoomProfileSettings .mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
  height: 22px !important;
  width: 22px !important;
  bottom: -2px !important;
  right: -2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mx_RoomProfileSettings .mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton svg {
  top: 0 !important;
  width: 12px !important;
  height: 12px !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

/* Cancel Profile Changes Button */
.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline {
  background-color: transparent !important;
  border: 1px solid #3f3f46 !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline,
body.theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline,
body[class*="light"] .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline {
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  background-color: #ffffff !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: #27272a !important;
}

body.cpd-theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline:hover:not([aria-disabled="true"]):not(:disabled),
body.theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline:hover:not([aria-disabled="true"]):not(:disabled),
body[class*="light"] .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary_outline:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* Save Profile Changes Button */
.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary {
  background-color: #10b981 !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}

.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton_kind_primary:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: #059669 !important;
}

/* Disabled State for Profile Buttons */
.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton[aria-disabled="true"],
.mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

body.cpd-theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton[aria-disabled="true"],
body.cpd-theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton:disabled,
body.theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton[aria-disabled="true"],
body.theme-light .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton:disabled,
body[class*="light"] .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton[aria-disabled="true"],
body[class*="light"] .mx_RoomProfileSettings .mx_RoomProfileSettings_buttons .mx_AccessibleButton:disabled {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}

/* Settings Flag Toggle Row */
.mx_SettingsTab_section .mx_SettingsFlag,
.mx_SettingsFieldset_content .mx_SettingsFlag,
.mx_SettingsFlag {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  margin-inline-end: 0 !important;
  text-align: left !important;
}

.mx_SettingsFlag .mx_SettingsFlag_label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  max-width: calc(100% - 60px) !important;
  font-size: 14px !important;
  color: var(--cpd-color-text-primary) !important;
}

.mx_SettingsFlag .mx_SettingsFlag_label * {
  text-align: left !important;
  align-self: flex-start !important;
}

.mx_SettingsFlag_microcopy {
  text-align: left !important;
  align-self: flex-start !important;
  margin-top: 4px !important;
}

.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch,
.mx_SettingsFieldset_content .mx_SettingsFlag .mx_ToggleSwitch,
.mx_SettingsFlag .mx_ToggleSwitch {
  float: none !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: center !important;
}

/* Room Addresses (mx_AliasSettings / mx_EditableItemList) Polish */
.mx_EditableItemList {
  width: 100% !important;
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  clear: both !important;
}

.mx_EditableItemList_label {
  color: var(--cpd-color-text-secondary, #a1a1aa) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  align-self: flex-start !important;
}

.mx_SettingsTab form.mx_EditableItemList_newItem,
.mx_EditableItemList_newItem {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  clear: both !important;
}

.mx_EditableItemList_newItem .mx_Field,
.mx_EditableItemList_newItem .mx_RoomAliasField {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx_EditableItemList_newItem .mx_Field input,
.mx_EditableItemList_newItem .mx_RoomAliasField input {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.mx_RoomAliasField {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.mx_RoomAliasField .mx_Field_prefix {
  flex: 0 0 auto !important;
}

.mx_RoomAliasField .mx_Field_postfix {
  flex: 0 0 auto !important;
  max-width: 45% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mx_EditableItemList_newItem button,
.mx_EditableItemList_newItem button[type="submit"],
.mx_EditableItemList_newItem .mx_AccessibleButton,
.mx_EditableItemList_newItem .mx_AccessibleButton_kind_primary {
  flex: 0 0 auto !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
  background-color: #10b981 !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

.mx_EditableItemList_newItem .mx_AccessibleButton_kind_primary:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: #059669 !important;
}

.mx_EditableItemList_newItem .mx_AccessibleButton[aria-disabled="true"],
.mx_EditableItemList_newItem .mx_AccessibleButton:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* Existing alias items in list */
.mx_EditableItemList ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mx_EditableItem {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid #27272a !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.cpd-theme-light .mx_EditableItem,
body.theme-light .mx_EditableItem,
body[class*="light"] .mx_EditableItem {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.mx_EditableItem_item {
  flex: 1 1 auto !important;
  font-family: var(--font-mono) !important;
  font-size: 13.5px !important;
  color: var(--text-main, #f4f4f5) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}

body.cpd-theme-light .mx_EditableItem_item,
body.theme-light .mx_EditableItem_item,
body[class*="light"] .mx_EditableItem_item {
  color: #0f172a !important;
}

/* Settings Toggle Switches */
.mx_ToggleSwitch,
[role="switch"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
  cursor: pointer !important;
}

body.cpd-theme-dark .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
body.theme-dark .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
body.cpd-theme-dark [role="switch"][aria-checked="false"],
body.theme-dark [role="switch"][aria-checked="false"],
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) [role="switch"][aria-checked="false"] {
  background-color: #27272a !important;
  border-color: #3f3f46 !important;
}

body.cpd-theme-light .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
body.theme-light .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
body[class*="light"] .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
html[class*="light"] .mx_ToggleSwitch:not(.mx_ToggleSwitch_on),
body.cpd-theme-light [role="switch"][aria-checked="false"],
body.theme-light [role="switch"][aria-checked="false"],
body[class*="light"] [role="switch"][aria-checked="false"],
html[class*="light"] [role="switch"][aria-checked="false"] {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

.mx_ToggleSwitch.mx_ToggleSwitch_on,
[role="switch"][aria-checked="true"] {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

.mx_ToggleSwitch_ball,
[role="switch"] > span,
.cpd-switch__thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mx_ToggleSwitch.mx_ToggleSwitch_on .mx_ToggleSwitch_ball,
[role="switch"][aria-checked="true"] > span,
[role="switch"][aria-checked="true"] .cpd-switch__thumb {
  transform: translateX(20px) !important;
}

/* Settings Checkboxes & Radio Buttons */
.mx_Checkbox {
  display: inline-flex !important;
  align-items: center !important;
}

body.cpd-theme-light .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
body.theme-light .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
body[class*="light"] .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
html[class*="light"] .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
body.cpd-theme-light .mx_Checkbox_background,
body.theme-light .mx_Checkbox_background,
body[class*="light"] .mx_Checkbox_background,
html[class*="light"] .mx_Checkbox_background {
  border-color: #cbd5e1 !important;
  background-color: #ffffff !important;
}

body.cpd-theme-dark .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
body.theme-dark .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Checkbox input[type="checkbox"]:not(:checked) + label:before,
body.cpd-theme-dark .mx_Checkbox_background,
body.theme-dark .mx_Checkbox_background,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Checkbox_background {
  border-color: #3f3f46 !important;
  background-color: #18191c !important;
}

.mx_Checkbox input[type="checkbox"]:checked + label:before,
.mx_Checkbox.mx_Checkbox_checked .mx_Checkbox_background {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

/* Settings Dropdowns */
.mx_Dropdown,
.mx_Dropdown:focus,
.mx_Dropdown:hover,
.mx_Dropdown:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.mx_Dropdown_input {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

body.cpd-theme-light .mx_Dropdown_input,
body.theme-light .mx_Dropdown_input,
body[class*="light"] .mx_Dropdown_input,
html[class*="light"] .mx_Dropdown_input {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-light .mx_Dropdown_input:hover,
body.theme-light .mx_Dropdown_input:hover,
body[class*="light"] .mx_Dropdown_input:hover,
html[class*="light"] .mx_Dropdown_input:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}

body.cpd-theme-light .mx_Dropdown_input:focus,
body.cpd-theme-light .mx_Dropdown_input:focus-visible,
body.theme-light .mx_Dropdown_input:focus,
body.theme-light .mx_Dropdown_input:focus-visible,
body[class*="light"] .mx_Dropdown_input:focus,
body[class*="light"] .mx_Dropdown_input:focus-visible,
html[class*="light"] .mx_Dropdown_input:focus,
html[class*="light"] .mx_Dropdown_input:focus-visible,
.mx_Dropdown_open .mx_Dropdown_input {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}

body.cpd-theme-dark .mx_Dropdown_input,
body.theme-dark .mx_Dropdown_input,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_input {
  background-color: #141518 !important;
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  color: #f4f4f5 !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-dark .mx_Dropdown_input:hover,
body.theme-dark .mx_Dropdown_input:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_input:hover {
  background-color: #1c1d22 !important;
  border-color: #3f3f46 !important;
}

body.cpd-theme-dark .mx_Dropdown_input:focus,
body.cpd-theme-dark .mx_Dropdown_input:focus-visible,
body.theme-dark .mx_Dropdown_input:focus,
body.theme-dark .mx_Dropdown_input:focus-visible,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_input:focus,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_input:focus-visible,
.mx_Dropdown_open .mx_Dropdown_input {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
  outline: none !important;
}

/* Selected option label inside dropdown trigger: transparent, no individual hover or border */
.mx_Dropdown_input > .mx_Dropdown_option,
.mx_Dropdown_input > .mx_Dropdown_option:hover,
.mx_Dropdown_input > .mx_Dropdown_option:focus,
.mx_Dropdown_input > .mx_Dropdown_option[aria-selected="true"],
.mx_Dropdown_input > input.mx_Dropdown_option,
.mx_Dropdown_input > input.mx_Dropdown_option:hover,
.mx_Dropdown_input > input.mx_Dropdown_option:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  height: 100% !important;
  min-height: 0 !important;
  line-height: inherit !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Dropdown menu container */
.mx_Dropdown_menu,
ul.mx_Dropdown_menu,
.mx_Dropdown_input .mx_Dropdown_menu {
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px !important;
  border-radius: 12px !important;
  list-style: none !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
}

/* Dropdown menu options: strict uniform padding, zero offset on hover */
.mx_Dropdown_menu .mx_Dropdown_option,
.mx_Dropdown_input .mx_Dropdown_menu .mx_Dropdown_option,
ul.mx_Dropdown_menu li.mx_Dropdown_option {
  display: flex !important;
  align-items: center !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  text-align: left !important;
  border: none !important;
  outline: none !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

.mx_Dropdown_menu .mx_Dropdown_option > div,
.mx_Dropdown_input .mx_Dropdown_menu .mx_Dropdown_option > div,
ul.mx_Dropdown_menu li.mx_Dropdown_option > div {
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.mx_Dropdown_menu .mx_Dropdown_option::before,
.mx_Dropdown_menu .mx_Dropdown_option::after,
.mx_Dropdown_menu .mx_Dropdown_option > div::before,
.mx_Dropdown_menu .mx_Dropdown_option > div::after {
  display: none !important;
  content: none !important;
}

/* Strict uniform padding and margin on hover, highlight, and selected states */
.mx_Dropdown_menu .mx_Dropdown_option:hover,
.mx_Dropdown_menu .mx_Dropdown_option.mx_Dropdown_option_highlight,
.mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
.mx_Dropdown_input .mx_Dropdown_menu .mx_Dropdown_option:hover,
.mx_Dropdown_input .mx_Dropdown_menu .mx_Dropdown_option.mx_Dropdown_option_highlight,
.mx_Dropdown_input .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
.mx_Dropdown_input .mx_Dropdown_menu li.mx_Dropdown_option:hover,
.mx_Dropdown_input .mx_Dropdown_menu li.mx_Dropdown_option.mx_Dropdown_option_highlight,
.mx_Dropdown_input .mx_Dropdown_menu li.mx_Dropdown_option[aria-selected="true"] {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  margin: 2px 0 !important;
  box-sizing: border-box !important;
}

body.cpd-theme-light .mx_Dropdown_menu .mx_Dropdown_option,
body.theme-light .mx_Dropdown_menu .mx_Dropdown_option,
body[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option,
html[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option {
  color: #334155 !important;
  background-color: transparent !important;
}

body.cpd-theme-light .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.theme-light .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.cpd-theme-light .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.theme-light .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option:hover,
body[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option.mx_Dropdown_option_highlight,
body[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
html[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option:hover,
html[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option.mx_Dropdown_option_highlight,
html[class*="light"] .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.cpd-theme-light .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.theme-light .mx_Dropdown_menu .mx_Dropdown_option_highlight {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option,
body.theme-dark .mx_Dropdown_menu .mx_Dropdown_option,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_menu .mx_Dropdown_option {
  color: #d4d4d8 !important;
  background-color: transparent !important;
}

body.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.theme-dark .mx_Dropdown_menu .mx_Dropdown_option:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.theme-dark .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.cpd-theme-dark .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.theme-dark .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_Dropdown_menu .mx_Dropdown_option_highlight {
  background-color: #27272a !important;
  color: #ffffff !important;
}

/* Filter Dropdown (Devices / Sessions list filter) */
.mx_FilterDropdown {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.mx_FilterDropdown .mx_Dropdown_input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px 0 12px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

.mx_FilterDropdown .mx_Dropdown_input .mx_Dropdown_option {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: normal !important;
  background: transparent !important;
}

.mx_FilterDropdown .mx_Dropdown_arrow {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Appearance Theme Selectors Cards */
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector,
body.theme-light .mx_ThemeChoicePanel_themeSelector,
body[class*="light"] .mx_ThemeChoicePanel_themeSelector,
html[class*="light"] .mx_ThemeChoicePanel_themeSelector {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector,
body.theme-dark .mx_ThemeChoicePanel_themeSelector,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_themeSelector {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: #f4f4f5 !important;
  font-weight: 600 !important;
}

.mx_ThemeChoicePanel_themeSelector[aria-checked="true"],
.mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_selected {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

/* Appearance Tab Compound Labels & System Theme Switch Label */
body.cpd-theme-light .mx_ThemeChoicePanel label,
body.theme-light .mx_ThemeChoicePanel label,
body[class*="light"] .mx_ThemeChoicePanel label,
html[class*="light"] .mx_ThemeChoicePanel label,
body.cpd-theme-light .mx_SettingsTab [class*="_label_"],
body.theme-light .mx_SettingsTab [class*="_label_"],
body[class*="light"] .mx_SettingsTab [class*="_label_"],
html[class*="light"] .mx_SettingsTab [class*="_label_"],
body.cpd-theme-light [class*="_inline-field"] label,
body.theme-light [class*="_inline-field"] label,
body[class*="light"] [class*="_inline-field"] label,
html[class*="light"] [class*="_inline-field"] label,
body.cpd-theme-light [data-radix-form-label],
body.theme-light [data-radix-form-label],
body[class*="light"] [data-radix-form-label],
html[class*="light"] [data-radix-form-label] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel label,
body.theme-dark .mx_ThemeChoicePanel label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel label,
body.cpd-theme-dark .mx_SettingsTab [class*="_label_"],
body.theme-dark .mx_SettingsTab [class*="_label_"],
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab [class*="_label_"],
body.cpd-theme-dark [class*="_inline-field"] label,
body.theme-dark [class*="_inline-field"] label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) [class*="_inline-field"] label,
body.cpd-theme-dark [data-radix-form-label],
body.theme-dark [data-radix-form-label],
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) [data-radix-form-label] {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Custom Themes Input and List items in Settings */
body.cpd-theme-light .mx_ThemeChoicePanel_CustomTheme,
body.theme-light .mx_ThemeChoicePanel_CustomTheme,
body[class*="light"] .mx_ThemeChoicePanel_CustomTheme,
html[class*="light"] .mx_ThemeChoicePanel_CustomTheme {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_CustomTheme label,
body.theme-light .mx_ThemeChoicePanel_CustomTheme label,
body[class*="light"] .mx_ThemeChoicePanel_CustomTheme label,
html[class*="light"] .mx_ThemeChoicePanel_CustomTheme label,
body.cpd-theme-light .mx_ThemeChoicePanel_CustomTheme_EditInPlace label,
body.theme-light .mx_ThemeChoicePanel_CustomTheme_EditInPlace label,
body[class*="light"] .mx_ThemeChoicePanel_CustomTheme_EditInPlace label,
html[class*="light"] .mx_ThemeChoicePanel_CustomTheme_EditInPlace label {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_CustomTheme label,
body.theme-dark .mx_ThemeChoicePanel_CustomTheme label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_CustomTheme label,
body.cpd-theme-dark .mx_ThemeChoicePanel_CustomTheme_EditInPlace label,
body.theme-dark .mx_ThemeChoicePanel_CustomTheme_EditInPlace label,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_CustomTheme_EditInPlace label {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_CustomTheme_EditInPlace input,
body.theme-light .mx_ThemeChoicePanel_CustomTheme_EditInPlace input,
body[class*="light"] .mx_ThemeChoicePanel_CustomTheme_EditInPlace input,
html[class*="light"] .mx_ThemeChoicePanel_CustomTheme_EditInPlace input {
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-radius: 8px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_CustomTheme_EditInPlace input,
body.theme-dark .mx_ThemeChoicePanel_CustomTheme_EditInPlace input,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_CustomTheme_EditInPlace input {
  border: 1.5px solid #27272a !important;
  background-color: #111215 !important;
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  border-radius: 8px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_CustomThemeList_theme,
body.theme-light .mx_ThemeChoicePanel_CustomThemeList_theme,
body[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_theme,
html[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_theme {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_CustomThemeList_theme,
body.theme-dark .mx_ThemeChoicePanel_CustomThemeList_theme,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_CustomThemeList_theme {
  background-color: #111215 !important;
  border: 1.5px solid #27272a !important;
  border-radius: 8px !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_CustomThemeList_name,
body.theme-light .mx_ThemeChoicePanel_CustomThemeList_name,
body[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_name,
html[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_name,
body.cpd-theme-light .mx_ThemeChoicePanel_CustomThemeList_theme *,
body.theme-light .mx_ThemeChoicePanel_CustomThemeList_theme *,
body[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_theme *,
html[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_theme * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_CustomThemeList_name,
body.theme-dark .mx_ThemeChoicePanel_CustomThemeList_name,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_CustomThemeList_name,
body.cpd-theme-dark .mx_ThemeChoicePanel_CustomThemeList_theme *,
body.theme-dark .mx_ThemeChoicePanel_CustomThemeList_theme *,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_ThemeChoicePanel_CustomThemeList_theme * {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Warning & Notice Cards in Settings */
body.cpd-theme-light .mx_SettingsTab_warningCard,
body.theme-light .mx_SettingsTab_warningCard,
body.cpd-theme-light .mx_SettingsTab_warning,
body.theme-light .mx_SettingsTab_warning,
body[class*="light"] .mx_SettingsTab_warningCard,
body[class*="light"] .mx_SettingsTab_warning {
  background-color: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  color: #92400e !important;
  border-radius: 8px !important;
}

body.cpd-theme-dark .mx_SettingsTab_warningCard,
body.theme-dark .mx_SettingsTab_warningCard,
body.cpd-theme-dark .mx_SettingsTab_warning,
body.theme-dark .mx_SettingsTab_warning,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsTab_warningCard {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
  border-radius: 8px !important;
}

/* Devices, Sessions & Security Tiles */
body.cpd-theme-light .mx_DeviceTile,
body.theme-light .mx_DeviceTile,
body[class*="light"] .mx_DeviceTile,
html[class*="light"] .mx_DeviceTile,
body.cpd-theme-light .mx_DevicesPanel_device,
body.theme-light .mx_DevicesPanel_device,
body[class*="light"] .mx_DevicesPanel_device,
html[class*="light"] .mx_DevicesPanel_device {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

body.cpd-theme-dark .mx_DeviceTile,
body.theme-dark .mx_DeviceTile,
body.cpd-theme-dark .mx_DevicesPanel_device,
body.theme-dark .mx_DevicesPanel_device,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DevicesPanel_device {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  border-radius: 12px !important;
  color: #f4f4f5 !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* Secondary & Danger Buttons in Settings */
body.cpd-theme-light .mx_AccessibleButton_kind_secondary,
body.theme-light .mx_AccessibleButton_kind_secondary,
body[class*="light"] .mx_AccessibleButton_kind_secondary,
html[class*="light"] .mx_AccessibleButton_kind_secondary {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

body.cpd-theme-light .mx_AccessibleButton_kind_secondary:hover,
body.theme-light .mx_AccessibleButton_kind_secondary:hover,
body[class*="light"] .mx_AccessibleButton_kind_secondary:hover,
html[class*="light"] .mx_AccessibleButton_kind_secondary:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_AccessibleButton_kind_danger,
body.theme-light .mx_AccessibleButton_kind_danger,
body[class*="light"] .mx_AccessibleButton_kind_danger,
html[class*="light"] .mx_AccessibleButton_kind_danger {
  background-color: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #b91c1c !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

body.cpd-theme-light .mx_AccessibleButton_kind_danger:hover,
body.theme-light .mx_AccessibleButton_kind_danger:hover,
body[class*="light"] .mx_AccessibleButton_kind_danger:hover,
html[class*="light"] .mx_AccessibleButton_kind_danger:hover {
  background-color: #fecaca !important;
}

/* 19. Clean custom scrollbars across all themes */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

body.cpd-theme-light ::-webkit-scrollbar-thumb,
body.theme-light ::-webkit-scrollbar-thumb,
body:not(.cpd-theme-dark):not(.theme-dark) ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 999px !important;
}

body.cpd-theme-light ::-webkit-scrollbar-thumb:hover,
body.theme-light ::-webkit-scrollbar-thumb:hover,
body:not(.cpd-theme-dark):not(.theme-dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

body.cpd-theme-dark ::-webkit-scrollbar-thumb,
body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 999px !important;
}

body.cpd-theme-dark ::-webkit-scrollbar-thumb:hover,
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* ==========================================================================
   20. Light Mode & Dark Mode Polish: Crystal Clear Typography & Contrast
   ========================================================================== */

/* Token fallbacks for Light Theme */
body.cpd-theme-light,
body.theme-light,
html.cpd-theme-light,
html.theme-light {
  background-color: #ffffff !important;
  color: #0f172a !important;
  --cpd-color-bg-canvas-default: #ffffff !important;
  --cpd-color-bg-subtle-primary: #f8fafc !important;
  --cpd-color-bg-subtle-secondary: #f1f5f9 !important;
  --cpd-color-text-primary: #0f172a !important;
  --cpd-color-text-secondary: #64748b !important;
  --cpd-color-icon-primary: #0f172a !important;
  --cpd-color-icon-secondary: #64748b !important;
  --cpd-color-icon-tertiary: #94a3b8 !important;
  --cpd-color-border-subtle: rgba(0, 0, 0, 0.08) !important;
}

/* Token fallbacks for Dark Theme */
body.cpd-theme-dark,
body.theme-dark,
html.cpd-theme-dark,
html.theme-dark {
  background-color: #111215 !important;
  color: #f4f4f5 !important;
  --cpd-color-bg-canvas-default: #111215 !important;
  --cpd-color-bg-subtle-primary: #18191c !important;
  --cpd-color-bg-subtle-secondary: #27272a !important;
  --cpd-color-text-primary: #ffffff !important;
  --cpd-color-text-secondary: #94a3b8 !important;
  --cpd-color-icon-primary: #ffffff !important;
  --cpd-color-icon-secondary: #94a3b8 !important;
  --cpd-color-icon-tertiary: #64748b !important;
  --cpd-color-border-subtle: #27272a !important;
  --cpd-color-border-interactive: #27272a !important;
}

/* Loading splash adaptation */
body.cpd-theme-light .mx_MatrixChat_splash,
body.theme-light .mx_MatrixChat_splash {
  background-color: #ffffff !important;
}

/* 20.1 Sidebar Header ("Trang chủ", Room List Header) */
.mx_RoomListHeader,
body.cpd-theme-light .mx_RoomListHeader,
body.theme-light .mx_RoomListHeader,
body.cpd-theme-dark .mx_RoomListHeader,
body.theme-dark .mx_RoomListHeader {
  margin: 6px 12px 2px 12px !important;
  padding: 2px 0 !important;
  min-height: 32px !important;
}

body.cpd-theme-light .mx_RoomListHeader,
body.theme-light .mx_RoomListHeader,
body.cpd-theme-light .mx_RoomListHeader_contextMenuButton,
body.theme-light .mx_RoomListHeader_contextMenuButton,
body.cpd-theme-light .mx_RoomListHeader_contextLessTitle,
body.theme-light .mx_RoomListHeader_contextLessTitle {
  color: #0f172a !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_RoomListHeader_contextMenuButton:hover,
body.theme-light .mx_RoomListHeader_contextMenuButton:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

body.cpd-theme-light .mx_RoomListHeader_contextMenuButton:before,
body.theme-light .mx_RoomListHeader_contextMenuButton:before {
  background-color: #475569 !important;
}

body.cpd-theme-light .mx_RoomListHeader_plusButton,
body.theme-light .mx_RoomListHeader_plusButton {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_RoomListHeader_plusButton:hover,
body.theme-light .mx_RoomListHeader_plusButton:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

body.cpd-theme-light .mx_RoomListHeader_plusButton:before,
body.theme-light .mx_RoomListHeader_plusButton:before {
  background-color: #0f172a !important;
}

/* Dark mode sidebar header */
body.cpd-theme-dark .mx_RoomListHeader,
body.theme-dark .mx_RoomListHeader,
body.cpd-theme-dark .mx_RoomListHeader_contextMenuButton,
body.theme-dark .mx_RoomListHeader_contextMenuButton,
body.cpd-theme-dark .mx_RoomListHeader_contextLessTitle,
body.theme-dark .mx_RoomListHeader_contextLessTitle {
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.cpd-theme-dark .mx_RoomListHeader_contextMenuButton:before,
body.theme-dark .mx_RoomListHeader_contextMenuButton:before {
  background-color: #94a3b8 !important;
}

body.cpd-theme-dark .mx_RoomListHeader_plusButton,
body.theme-dark .mx_RoomListHeader_plusButton {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
}

body.cpd-theme-dark .mx_RoomListHeader_plusButton:before,
body.theme-dark .mx_RoomListHeader_plusButton:before {
  background-color: #ffffff !important;
}

/* 20.2 Main View Onboarding Card (Welcome to SecureChat) */
body.cpd-theme-light .mx_UserOnboardingHeader,
body.theme-light .mx_UserOnboardingHeader {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

body.cpd-theme-light .mx_UserOnboardingHeader h1,
body.theme-light .mx_UserOnboardingHeader h1,
body.cpd-theme-light .mx_UserOnboardingHeader [class*="heading"],
body.theme-light .mx_UserOnboardingHeader [class*="heading"],
body.cpd-theme-light .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content > *:first-child,
body.theme-light .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content > *:first-child {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.cpd-theme-light .mx_UserOnboardingHeader p,
body.theme-light .mx_UserOnboardingHeader p,
body.cpd-theme-light .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content p,
body.theme-light .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content p {
  color: #475569 !important;
}

body.cpd-theme-light .mx_UserOnboardingHeader .mx_UserOnboardingHeader_dot,
body.theme-light .mx_UserOnboardingHeader .mx_UserOnboardingHeader_dot {
  color: #10b981 !important;
}

body.cpd-theme-dark .mx_UserOnboardingHeader,
body.theme-dark .mx_UserOnboardingHeader {
  background: #18191c !important;
  border: 1px solid #27272a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.cpd-theme-dark .mx_UserOnboardingHeader h1,
body.theme-dark .mx_UserOnboardingHeader h1,
body.cpd-theme-dark .mx_UserOnboardingHeader [class*="heading"],
body.theme-dark .mx_UserOnboardingHeader [class*="heading"],
body.cpd-theme-dark .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content > *:first-child,
body.theme-dark .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content > *:first-child {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.cpd-theme-dark .mx_UserOnboardingHeader p,
body.theme-dark .mx_UserOnboardingHeader p,
body.cpd-theme-dark .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content p,
body.theme-dark .mx_UserOnboardingHeader .mx_UserOnboardingHeader_content p {
  color: #94a3b8 !important;
}

body.cpd-theme-dark .mx_UserOnboardingHeader .mx_UserOnboardingHeader_dot,
body.theme-dark .mx_UserOnboardingHeader .mx_UserOnboardingHeader_dot {
  color: #10b981 !important;
}

/* 20.3 Sidebar Profile Footer & Menu */
body.cpd-theme-light .mx_SpacePanel,
body.theme-light .mx_SpacePanel {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.cpd-theme-light .mx_SpacePanel .mx_UserMenu_name,
html.theme-light .mx_SpacePanel .mx_UserMenu_name,
body.cpd-theme-light .mx_SpacePanel .mx_UserMenu_name,
body.theme-light .mx_SpacePanel .mx_UserMenu_name {
  color: #0f172a !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton:hover,
body.theme-light .mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.cpd-theme-light .mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton::after,
body.theme-light .mx_SpacePanel .mx_UserMenu .mx_UserMenu_contextMenuButton::after {
  background-color: #64748b !important;
}

body.cpd-theme-light .mx_UserMenu_contextMenu,
body.theme-light .mx_UserMenu_contextMenu {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name,
body.theme-light .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_userId,
body.theme-light .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_userId {
  color: #64748b !important;
}

body.cpd-theme-light .mx_IconizedContextMenu_item,
body.theme-light .mx_IconizedContextMenu_item {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon,
body.theme-light .mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #64748b !important;
}

body.cpd-theme-light .mx_IconizedContextMenu_item:hover,
body.theme-light .mx_IconizedContextMenu_item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

body.cpd-theme-light .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon,
body.theme-light .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #0f172a !important;
}

/* 20.4 Left Panel, Room Sublists & Room Tiles */
body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel_outerWrapper,
body.theme-dark:not([class*="light"]) .mx_LeftPanel_outerWrapper,
body:not([class*="light"]) .mx_LeftPanel_outerWrapper {
  background: #111215 !important;
  background-color: #111215 !important;
  border-right: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel,
body.theme-dark:not([class*="light"]) .mx_LeftPanel,
body:not([class*="light"]) .mx_LeftPanel,
body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel_wrapper,
body.theme-dark:not([class*="light"]) .mx_LeftPanel_wrapper,
body:not([class*="light"]) .mx_LeftPanel_wrapper,
body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel_roomListContainer,
body.theme-dark:not([class*="light"]) .mx_LeftPanel_roomListContainer,
body:not([class*="light"]) .mx_LeftPanel_roomListContainer,
body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel_roomListWrapper,
body.theme-dark:not([class*="light"]) .mx_LeftPanel_roomListWrapper,
body:not([class*="light"]) .mx_LeftPanel_roomListWrapper,
body.cpd-theme-dark:not([class*="light"]) .mx_LeftPanel_actualRoomListContainer,
body.theme-dark:not([class*="light"]) .mx_LeftPanel_actualRoomListContainer,
body:not([class*="light"]) .mx_LeftPanel_actualRoomListContainer {
  background: #111215 !important;
  background-color: #111215 !important;
  border-right: none !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_LeftPanel_outerWrapper,
body.theme-light .mx_LeftPanel_outerWrapper,
body[class*="light"] .mx_LeftPanel_outerWrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_LeftPanel,
body.theme-light .mx_LeftPanel,
body[class*="light"] .mx_LeftPanel,
body.cpd-theme-light .mx_LeftPanel_wrapper,
body.theme-light .mx_LeftPanel_wrapper,
body[class*="light"] .mx_LeftPanel_wrapper,
body.cpd-theme-light .mx_LeftPanel_roomListContainer,
body.theme-light .mx_LeftPanel_roomListContainer,
body[class*="light"] .mx_LeftPanel_roomListContainer,
body.cpd-theme-light .mx_LeftPanel_roomListWrapper,
body.theme-light .mx_LeftPanel_roomListWrapper,
body[class*="light"] .mx_LeftPanel_roomListWrapper,
body.cpd-theme-light .mx_LeftPanel_actualRoomListContainer,
body.theme-light .mx_LeftPanel_actualRoomListContainer,
body[class*="light"] .mx_LeftPanel_actualRoomListContainer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-right: none !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_RoomHeader,
body.theme-light .mx_RoomHeader {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_MessageComposer,
body.theme-light .mx_MessageComposer,
body.cpd-theme-light .mx_MessageComposer_wrapper,
body.theme-light .mx_MessageComposer_wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_RoomSublist_headerText,
body.theme-light .mx_RoomSublist_headerText {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

body.cpd-theme-light .mx_RoomSublist_badge,
body.theme-light .mx_RoomSublist_badge {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
}

body.cpd-theme-light .mx_RoomTile_name,
body.theme-light .mx_RoomTile_name {
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
}

body.cpd-theme-light .mx_RoomTile_messagePreview,
body.theme-light .mx_RoomTile_messagePreview {
  color: #64748b !important;
  font-size: 13.5px !important;
}

body.cpd-theme-light .mx_RoomTile:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

body.cpd-theme-light .mx_RoomTile.mx_RoomTile_selected,
body.theme-light .mx_RoomTile.mx_RoomTile_selected {
  background-color: rgba(16, 185, 129, 0.1) !important;
}
body.cpd-theme-light .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name,
body.theme-light .mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
  color: #047857 !important;
  font-weight: 600 !important;
}

/* Unread room tiles: bold title and high contrast */
body.cpd-theme-dark .mx_RoomTile_unread .mx_RoomTile_name,
body.theme-dark .mx_RoomTile_unread .mx_RoomTile_name,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomTile_unread .mx_RoomTile_name {
  color: #ffffff !important;
  font-weight: 700 !important;
}
body.cpd-theme-light .mx_RoomTile_unread .mx_RoomTile_name,
body.theme-light .mx_RoomTile_unread .mx_RoomTile_name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Light mode notification badges */
body.cpd-theme-light .mx_NotificationBadge.mx_NotificationBadge_level_highlight,
body.theme-light .mx_NotificationBadge.mx_NotificationBadge_level_highlight {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}
body.cpd-theme-light .mx_NotificationBadge.mx_NotificationBadge_level_notification,
body.theme-light .mx_NotificationBadge.mx_NotificationBadge_level_notification {
  background-color: #059669 !important;
  color: #ffffff !important;
}

/* Dark mode neutral sublist badge */
body.cpd-theme-dark .mx_RoomSublist_badge,
body.theme-dark .mx_RoomSublist_badge,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSublist_badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

/* Unread notification dots */
.mx_NotificationBadge_dot {
  border-radius: 9999px !important;
}
body.cpd-theme-dark .mx_NotificationBadge_dot,
body.theme-dark .mx_NotificationBadge_dot,
body:not(.cpd-theme-light):not(.theme-light) .mx_NotificationBadge_dot {
  background-color: #10b981 !important;
}
body.cpd-theme-light .mx_NotificationBadge_dot,
body.theme-light .mx_NotificationBadge_dot {
  background-color: #059669 !important;
}

/* 20.5 Main Chat View & Messages */
body.cpd-theme-light .mx_RoomView_wrapper,
body.theme-light .mx_RoomView_wrapper,
body[class*="light"] .mx_RoomView_wrapper,
html[class*="light"] .mx_RoomView_wrapper,
body.cpd-theme-light .mx_RoomView,
body.theme-light .mx_RoomView,
body[class*="light"] .mx_RoomView,
html[class*="light"] .mx_RoomView,
body.cpd-theme-light .mx_HomePage,
body.theme-light .mx_HomePage,
body[class*="light"] .mx_HomePage,
html[class*="light"] .mx_HomePage {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_RoomHeader_nametext,
body.theme-light .mx_RoomHeader_nametext {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.mx_RoomHeader_topic {
  display: none !important;
}

body.cpd-theme-light .sc-mobile-back-btn,
body.theme-light .sc-mobile-back-btn {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_EventTile_body,
body.theme-light .mx_EventTile_body {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_DisambiguatedProfile_displayName,
body.theme-light .mx_DisambiguatedProfile_displayName {
  color: #0369a1 !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_MessageTimestamp,
body.theme-light .mx_MessageTimestamp {
  color: #475569 !important;
  font-size: 12.5px !important;
}

/* 20.6 Dialogs and Headings */
body.cpd-theme-light .mx_Dialog_title,
body.theme-light .mx_Dialog_title,
body.cpd-theme-light .mx_Heading_h3,
body.theme-light .mx_Heading_h3,
body.cpd-theme-light .mx_Heading_h4,
body.theme-light .mx_Heading_h4 {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_SettingsTab_heading,
body.theme-light .mx_SettingsTab_heading,
body.cpd-theme-light .mx_SettingsTab_subheading,
body.theme-light .mx_SettingsTab_subheading {
  color: #0f172a !important;
}

body.cpd-theme-light .mx_SettingsTab,
body.theme-light .mx_SettingsTab {
  color: #334155 !important;
}

/* ==========================================================================
   20.7 Chat View, Event Tiles, Sender Profiles & Timestamps Polish
   ========================================================================== */

/* --- Dark Mode Chat View Canvas & Headers --- */
body.cpd-theme-dark:not([class*="light"]) .mx_RoomView_wrapper,
body.theme-dark:not([class*="light"]) .mx_RoomView_wrapper,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_RoomView_wrapper,
body.cpd-theme-dark:not([class*="light"]) .mx_RoomView,
body.theme-dark:not([class*="light"]) .mx_RoomView,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_RoomView,
body.cpd-theme-dark:not([class*="light"]) .mx_HomePage,
body.theme-dark:not([class*="light"]) .mx_HomePage,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage {
  background-color: #111215 !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_RoomHeader_nametext,
body.theme-dark .mx_RoomHeader_nametext,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomHeader_nametext {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}


/* --- Dark Mode Message Body, Links & Quotes --- */
body.cpd-theme-dark .mx_EventTile_body,
body.theme-dark .mx_EventTile_body,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_body {
  color: #f4f4f5 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.55 !important;
}

body.cpd-theme-dark .mx_EventTile_body a,
body.theme-dark .mx_EventTile_body a,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_body a {
  color: #38bdf8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

body.cpd-theme-dark .mx_EventTile_body a:hover,
body.theme-dark .mx_EventTile_body a:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_body a:hover {
  color: #7dd3fc !important;
}

body.cpd-theme-dark .mx_EventTile_body blockquote,
body.theme-dark .mx_EventTile_body blockquote,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_body blockquote,
body.cpd-theme-dark .mx_ReplyTile,
body.theme-dark .mx_ReplyTile,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyTile {
  border-left: 3px solid #10b981 !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: #a1a1aa !important;
  border-radius: 0 6px 6px 0 !important;
}

/* --- Dark Mode Sender Display Names (#38bdf8) --- */
body.cpd-theme-dark .mx_DisambiguatedProfile_displayName,
body.theme-dark .mx_DisambiguatedProfile_displayName,
body:not(.cpd-theme-light):not(.theme-light) .mx_DisambiguatedProfile_displayName,
body.cpd-theme-dark .mx_EventTile_sender,
body.theme-dark .mx_EventTile_sender,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_sender,
body.cpd-theme-dark .mx_SenderProfile_displayName,
body.theme-dark .mx_SenderProfile_displayName,
body:not(.cpd-theme-light):not(.theme-light) .mx_SenderProfile_displayName,
body.cpd-theme-dark .mx_ReplyTile_sender,
body.theme-dark .mx_ReplyTile_sender,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyTile_sender,
body.cpd-theme-dark .mx_ThreadSummary_sender,
body.theme-dark .mx_ThreadSummary_sender,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThreadSummary_sender,
body.cpd-theme-dark .mx_EventTile_sender [class*="mx_Username_color"],
body.theme-dark .mx_EventTile_sender [class*="mx_Username_color"],
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_sender [class*="mx_Username_color"] {
  color: #38bdf8 !important;
  font-weight: 600 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.cpd-theme-dark .mx_DisambiguatedProfile:hover .mx_DisambiguatedProfile_displayName,
body.theme-dark .mx_DisambiguatedProfile:hover .mx_DisambiguatedProfile_displayName,
body:not(.cpd-theme-light):not(.theme-light) .mx_DisambiguatedProfile:hover .mx_DisambiguatedProfile_displayName,
body.cpd-theme-dark .mx_SenderProfile:hover .mx_SenderProfile_displayName,
body.theme-dark .mx_SenderProfile:hover .mx_SenderProfile_displayName,
body:not(.cpd-theme-light):not(.theme-light) .mx_SenderProfile:hover .mx_SenderProfile_displayName {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}

/* Subtle Disambiguation MXID in Dark Mode */
body.cpd-theme-dark .mx_DisambiguatedProfile_mxid,
body.theme-dark .mx_DisambiguatedProfile_mxid,
body:not(.cpd-theme-light):not(.theme-light) .mx_DisambiguatedProfile_mxid,
body.cpd-theme-dark .mx_SenderProfile_disambiguation,
body.theme-dark .mx_SenderProfile_disambiguation,
body:not(.cpd-theme-light):not(.theme-light) .mx_SenderProfile_disambiguation {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  font-size: 0.88em !important;
  opacity: 0.85 !important;
}

/* --- Dark Mode Timestamps --- */
body.cpd-theme-dark .mx_MessageTimestamp,
body.theme-dark .mx_MessageTimestamp,
body:not(.cpd-theme-light):not(.theme-light) .mx_MessageTimestamp,
body.cpd-theme-dark .mx_EventTile_timestamp,
body.theme-dark .mx_EventTile_timestamp,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_timestamp {
  color: #94a3b8 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12.5px !important;
  opacity: 1 !important;
}

/* --- Light Mode Sender Display Names (#0369a1) --- */
body.cpd-theme-light .mx_DisambiguatedProfile_displayName,
body.theme-light .mx_DisambiguatedProfile_displayName,
body.cpd-theme-light .mx_EventTile_sender,
body.theme-light .mx_EventTile_sender,
body.cpd-theme-light .mx_SenderProfile_displayName,
body.theme-light .mx_SenderProfile_displayName,
body.cpd-theme-light .mx_ReplyTile_sender,
body.theme-light .mx_ReplyTile_sender,
body.cpd-theme-light .mx_ThreadSummary_sender,
body.theme-light .mx_ThreadSummary_sender,
body.cpd-theme-light .mx_EventTile_sender [class*="mx_Username_color"],
body.theme-light .mx_EventTile_sender [class*="mx_Username_color"] {
  color: #0369a1 !important;
  font-weight: 600 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.cpd-theme-light .mx_DisambiguatedProfile:hover .mx_DisambiguatedProfile_displayName,
body.theme-light .mx_DisambiguatedProfile:hover .mx_DisambiguatedProfile_displayName,
body.cpd-theme-light .mx_SenderProfile:hover .mx_SenderProfile_displayName,
body.theme-light .mx_SenderProfile:hover .mx_SenderProfile_displayName {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

/* Subtle Disambiguation MXID in Light Mode */
body.cpd-theme-light .mx_DisambiguatedProfile_mxid,
body.theme-light .mx_DisambiguatedProfile_mxid,
body.cpd-theme-light .mx_SenderProfile_disambiguation,
body.theme-light .mx_SenderProfile_disambiguation {
  color: #64748b !important;
  font-weight: 400 !important;
  font-size: 0.88em !important;
  opacity: 0.9 !important;
}

/* --- Light Mode Message Body, Links, Quotes & Timestamps --- */
body.cpd-theme-light .mx_EventTile_body,
body.theme-light .mx_EventTile_body {
  color: #0f172a !important;
  line-height: 1.55 !important;
}

body.cpd-theme-light .mx_EventTile_body a,
body.theme-light .mx_EventTile_body a {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

body.cpd-theme-light .mx_EventTile_body blockquote,
body.theme-light .mx_EventTile_body blockquote,
body.cpd-theme-light .mx_ReplyTile,
body.theme-light .mx_ReplyTile {
  border-left: 3px solid #059669 !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: #475569 !important;
  border-radius: 0 6px 6px 0 !important;
}

body.cpd-theme-light .mx_MessageTimestamp,
body.theme-light .mx_MessageTimestamp,
body.cpd-theme-light .mx_EventTile_timestamp,
body.theme-light .mx_EventTile_timestamp {
  color: #475569 !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12.5px !important;
  opacity: 1 !important;
}

/* --- Event Tile Interaction & Highlights --- */
body.cpd-theme-dark .mx_EventTile:hover,
body.theme-dark .mx_EventTile:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile:hover {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

body.cpd-theme-light .mx_EventTile:hover,
body.theme-light .mx_EventTile:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Mention Highlight */
body.cpd-theme-dark .mx_EventTile.mx_EventTile_highlight,
body.theme-dark .mx_EventTile.mx_EventTile_highlight,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile.mx_EventTile_highlight {
  background-color: rgba(16, 185, 129, 0.12) !important;
  border-left: 3px solid #10b981 !important;
}

body.cpd-theme-light .mx_EventTile.mx_EventTile_highlight,
body.theme-light .mx_EventTile.mx_EventTile_highlight {
  background-color: rgba(16, 185, 129, 0.08) !important;
  border-left: 3px solid #059669 !important;
}

/* Selected / Focused Tile */
body.cpd-theme-dark .mx_EventTile.mx_EventTile_selected,
body.theme-dark .mx_EventTile.mx_EventTile_selected,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile.mx_EventTile_selected {
  background-color: rgba(56, 189, 248, 0.12) !important;
  border-left: 3px solid #38bdf8 !important;
}

body.cpd-theme-light .mx_EventTile.mx_EventTile_selected,
body.theme-light .mx_EventTile.mx_EventTile_selected {
  background-color: rgba(3, 105, 161, 0.08) !important;
  border-left: 3px solid #0369a1 !important;
}

/* Code blocks inside message timeline (JetBrains Mono monospace) */
body.cpd-theme-dark .mx_EventTile_content code,
body.cpd-theme-dark .mx_EventTile_content pre,
body.theme-dark .mx_EventTile_content code,
body.theme-dark .mx_EventTile_content pre {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
  border-radius: 6px !important;
  color: #e2e8f0 !important;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace !important;
}

body.cpd-theme-light .mx_EventTile_content code,
body.cpd-theme-light .mx_EventTile_content pre,
body.theme-light .mx_EventTile_content code,
body.theme-light .mx_EventTile_content pre {
  background-color: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace !important;
}

.mx_EventTile_content pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Notification badges */
.mx_NotificationBadge,
.mx_RoomSublist_badge {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
}

body.theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_highlight,
body.cpd-theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_highlight {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

body.theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_notification,
body.cpd-theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_notification {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Home Page & Embedded Welcome View Enforcement
   ========================================================================== */
body.cpd-theme-light .mx_HomePage,
body.theme-light .mx_HomePage,
body[class*="light"] .mx_HomePage,
html[class*="light"] .mx_HomePage,
body.cpd-theme-light .mx_HomePage_loggedIn,
body.theme-light .mx_HomePage_loggedIn,
body[class*="light"] .mx_HomePage_loggedIn,
html[class*="light"] .mx_HomePage_loggedIn,
body.cpd-theme-light .mx_HomePage_default,
body.theme-light .mx_HomePage_default,
body[class*="light"] .mx_HomePage_default,
html[class*="light"] .mx_HomePage_default,
body.cpd-theme-light .mx_HomePage_body,
body.theme-light .mx_HomePage_body,
body[class*="light"] .mx_HomePage_body,
html[class*="light"] .mx_HomePage_body,
body.cpd-theme-light iframe.mx_HomePage_default,
body.theme-light iframe.mx_HomePage_default,
body[class*="light"] iframe.mx_HomePage_default,
html[class*="light"] iframe.mx_HomePage_default,
body.cpd-theme-light .mx_HomePage iframe,
body.theme-light .mx_HomePage iframe,
body[class*="light"] .mx_HomePage iframe,
html[class*="light"] .mx_HomePage iframe {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_HomePage,
body.theme-dark:not([class*="light"]) .mx_HomePage,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage,
body.cpd-theme-dark:not([class*="light"]) .mx_HomePage_loggedIn,
body.theme-dark:not([class*="light"]) .mx_HomePage_loggedIn,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage_loggedIn,
body.cpd-theme-dark:not([class*="light"]) .mx_HomePage_default,
body.theme-dark:not([class*="light"]) .mx_HomePage_default,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage_default,
body.cpd-theme-dark:not([class*="light"]) .mx_HomePage_body,
body.theme-dark:not([class*="light"]) .mx_HomePage_body,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage_body,
body.cpd-theme-dark:not([class*="light"]) iframe.mx_HomePage_default,
body.theme-dark:not([class*="light"]) iframe.mx_HomePage_default,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) iframe.mx_HomePage_default,
body.cpd-theme-dark:not([class*="light"]) .mx_HomePage iframe,
body.theme-dark:not([class*="light"]) .mx_HomePage iframe,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage iframe {
  background-color: #111215 !important;
  background: #111215 !important;
  color: #f4f4f5 !important;
}

.mx_HomePage,
.mx_HomePage_loggedIn,
.mx_HomePage_default {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.mx_HomePage_body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
}

.sc-welcome-page {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 100% !important;
  padding: 32px 24px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background-color: transparent !important;
  overflow: hidden !important;
}

.sc-welcome-page .dotted-glow-bg,
.sc-welcome .dotted-glow-bg,
#dotted-glow-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  opacity: 0.92 !important;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.2) 70%, transparent 92%) !important;
  mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.2) 70%, transparent 92%) !important;
}

.sc-welcome-page .dotted-glow-bg canvas,
.sc-welcome-page #dotted-glow-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.sc-welcome-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 520px !important;
  width: 100% !important;
  animation: sc-fade-in 0.35s ease-out !important;
}

@keyframes sc-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bare unwrapped SecureChat logo: never wrap in badge, card, or container */
.sc-welcome-logo-container,
.sc-welcome .sc-badge,
.sc-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  display: contents !important;
}

.sc-welcome-logo,
.sc-welcome .sc-logo,
svg.sc-logo {
  width: 64px !important;
  height: 64px !important;
  display: block !important;
  margin: 0 auto 20px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 16px rgba(16, 185, 129, 0.25)) !important;
  transition: transform 0.2s ease !important;
}

.sc-welcome-logo:hover,
.sc-welcome .sc-logo:hover,
svg.sc-logo:hover {
  transform: scale(1.05) !important;
}

.sc-welcome-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

body.theme-light .sc-welcome-title,
body.cpd-theme-light .sc-welcome-title {
  color: #0f172a !important;
}

.sc-welcome-subtitle {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  color: #94a3b8 !important;
}

body.theme-light .sc-welcome-subtitle,
body.cpd-theme-light .sc-welcome-subtitle {
  color: #64748b !important;
}

/* Ensure desktop splitscreen: left panel is visible and room wrapper / home view has full height */
@media (min-width: 768px) {
  .mx_LeftPanel_outerWrapper {
    display: flex !important;
    width: 320px !important;
    min-width: 260px !important;
    max-width: 460px !important;
    flex: 0 0 320px !important;
  }

  .mx_RoomView_wrapper,
  .mx_HomePage,
  .mx_HomePage_loggedIn,
  .mx_HomePage_default {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Storage Eviction & Auth Fallback Dialog Suppression
   ========================================================================== */
.sc-suppressed-dialog,
.sc-storage-evicted-dialog,
.mx_Dialog_wrapper.sc-suppressed-dialog,
.mx_Dialog_wrapper.sc-storage-evicted-dialog,
.mx_AuthPage:not(:has(.mx_CompleteSecurity)):not(:has(.mx_SetupEncryptionDialog)):not(:has(.mx_CompleteSecurityBody)),
.mx_Login,
.mx_WelcomePage,
[data-testid='login-page'],
[data-testid='welcome-page'] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Complete Suppression of Element Branding, Logos, and Discovery Links
   ========================================================================== */
.mx_LeftPanel_exploreButton,
.mx_HomePage_exploreRooms,
.mx_HomePage_button_explore,
.mx_HomePage_button,
.mx_HomePage_buttons,
.mx_HomePage_defaultButtons,
.mx_HomePage_header,
.mx_ExploreRooms,
.mx_SpotlightDialog_exploreRooms,
.mx_UserOnboardingList,
.mx_UserOnboardingTask,
.mx_UserOnboardingButton,
.mx_UserOnboardingHeader,
[data-testid="explore-rooms-button"],
[data-testid="explore-public-rooms"],
[data-testid="user-onboarding-explore-rooms"],
[data-testid="user-onboarding-list"],
[aria-label="Explore rooms"],
[aria-label="Khám phá phòng"],
[aria-label="Khám phá phòng công khai"],
[aria-label="Khám phá các phòng"],
[title="Explore rooms"],
[title="Khám phá phòng"],
[title="Khám phá phòng công khai"],
[title="Khám phá các phòng"],
a[href*="element.io"],
a[href*="matrix.org"],
.mx_Footer,
.mx_Footer_link,
.mx_AppDownload {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure EmbeddedPage iframe in HomePage fills entire container seamlessly */
.mx_HomePage iframe,
.mx_HomePage_default iframe,
.mx_HomePage_body iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  flex: 1 1 100% !important;
}

body.cpd-theme-light .mx_HomePage iframe,
body.theme-light .mx_HomePage iframe,
body[class*="light"] .mx_HomePage iframe,
html[class*="light"] .mx_HomePage iframe,
body.cpd-theme-light .mx_HomePage_body iframe,
body.theme-light .mx_HomePage_body iframe,
body[class*="light"] .mx_HomePage_body iframe,
html[class*="light"] .mx_HomePage_body iframe {
  background-color: #ffffff !important;
}

body.cpd-theme-dark:not([class*="light"]) .mx_HomePage iframe,
body.theme-dark:not([class*="light"]) .mx_HomePage iframe,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage iframe,
body.cpd-theme-dark:not([class*="light"]) .mx_HomePage_body iframe,
body.theme-dark:not([class*="light"]) .mx_HomePage_body iframe,
body:not([class*="light"]):not(.cpd-theme-light):not(.theme-light) .mx_HomePage_body iframe {
  background-color: #111215 !important;
}

/* =========================================================================
   SecureChat Network Resilience: Offline Banner & Reconnection Toast
   ========================================================================= */

.sc-network-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(calc(100vw - 32px), 480px);
  width: max-content;
  padding: 10px 16px;
  border-radius: 9999px;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sc-network-toast.sc-toast-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sc-network-toast.sc-toast-hiding {
  transform: translateX(-50%) translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

/* Dark Theme (Default) */
body.theme-dark .sc-network-toast,
body.cpd-theme-dark .sc-network-toast,
html:not(.theme-light) .sc-network-toast {
  background: rgba(24, 25, 28, 0.94);
  border: 1px solid #27272a;
  color: #f4f4f5;
}

/* Light Theme */
body.theme-light .sc-network-toast,
body.cpd-theme-light .sc-network-toast,
html.theme-light .sc-network-toast {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

/* Offline state (Amber/Rose) */
.sc-network-toast.sc-offline {
  border-color: rgba(245, 158, 11, 0.4);
}
.sc-toast-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.sc-network-toast.sc-offline .sc-toast-icon-wrap {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* Online state (Emerald) */
.sc-network-toast.sc-online {
  border-color: rgba(16, 185, 129, 0.45);
}
.sc-toast-icon-wrap.sc-icon-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.sc-toast-icon {
  width: 16px;
  height: 16px;
}

.sc-toast-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sc-toast-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.sc-toast-desc {
  font-size: 13px !important;
  line-height: 1.35;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-light .sc-toast-desc,
body.cpd-theme-light .sc-toast-desc {
  color: #64748b;
}

.sc-toast-actions {
  margin-left: 4px;
  flex-shrink: 0;
}

.sc-toast-retry-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 600;
  color: #ffffff !important;
  background: #10b981;
  border: 1px solid #10b981;
  border-radius: 9999px;
  transition: all 0.15s ease;
  outline: none;
}
.sc-toast-retry-btn:hover {
  background: #059669;
  border-color: #059669;
}
.sc-toast-retry-btn:active {
  transform: scale(0.96);
}
.sc-toast-retry-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sc-retry-icon {
  width: 13px;
  height: 13px;
}

.sc-spin-anim {
  animation: sc-toast-spin 0.8s linear infinite;
}

@keyframes sc-toast-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .sc-network-toast {
    top: 12px;
    width: calc(100vw - 24px);
    border-radius: 14px;
    padding: 8px 12px;
  }
  .sc-toast-desc {
    white-space: normal;
  }
}

/* ==========================================================================
   Security Key Backup & Verification Screens: SecureChat Branded & Accessible
   ========================================================================== */

/* Dialog container styling */
.mx_CreateSecretStorageDialog,
.mx_AccessSecretStorageDialog,
.mx_RestoreKeyBackupDialog,
.mx_CreateKeyBackupDialog,
.sc-verification-dialog {
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark .mx_CreateSecretStorageDialog,
body.cpd-theme-dark .mx_CreateSecretStorageDialog,
body.theme-dark .mx_AccessSecretStorageDialog,
body.cpd-theme-dark .mx_AccessSecretStorageDialog,
body.theme-dark .mx_RestoreKeyBackupDialog,
body.cpd-theme-dark .mx_RestoreKeyBackupDialog,
body.theme-dark .mx_CreateKeyBackupDialog,
body.cpd-theme-dark .mx_CreateKeyBackupDialog,
body.theme-dark .sc-verification-dialog,
body.cpd-theme-dark .sc-verification-dialog {
  background: #18191c !important;
  border: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_CreateSecretStorageDialog,
body.cpd-theme-light .mx_CreateSecretStorageDialog,
body.theme-light .mx_AccessSecretStorageDialog,
body.cpd-theme-light .mx_AccessSecretStorageDialog,
body.theme-light .mx_RestoreKeyBackupDialog,
body.cpd-theme-light .mx_RestoreKeyBackupDialog,
body.theme-light .mx_CreateKeyBackupDialog,
body.cpd-theme-light .mx_CreateKeyBackupDialog,
body.theme-light .sc-verification-dialog,
body.cpd-theme-light .sc-verification-dialog {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

/* Recovery Key Display Box: High contrast, crystal clear readability */
.mx_CreateSecretStorageDialog_recoveryKey,
.mx_CreateKeyBackupDialog_recoveryKey,
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 12px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.06em !important;
  padding: 18px 24px !important;
  text-align: center !important;
  word-spacing: 0.8em !important;
}

body.theme-dark .mx_CreateSecretStorageDialog_recoveryKey,
body.cpd-theme-dark .mx_CreateSecretStorageDialog_recoveryKey,
body.theme-dark .mx_CreateSecretStorageDialog_recoveryKey code,
body.cpd-theme-dark .mx_CreateSecretStorageDialog_recoveryKey code {
  color: #34d399 !important;
}

body.theme-light .mx_CreateSecretStorageDialog_recoveryKey,
body.cpd-theme-light .mx_CreateSecretStorageDialog_recoveryKey,
body.theme-light .mx_CreateSecretStorageDialog_recoveryKey code,
body.cpd-theme-light .mx_CreateSecretStorageDialog_recoveryKey code {
  color: #059669 !important;
}

/* Icons & Header Accents */
.mx_CreateSecretStorageDialog_optionIcon,
.mx_CreateSecretStorageDialog_titleWithIcon:before {
  background-color: #10b981 !important;
}

.mx_CreateSecretStorageDialog_optionTitle {
  color: var(--cpd-color-text-primary, #ffffff) !important;
  font-weight: 600 !important;
}

/* Radio button cards when selecting Passphrase vs Security Key */
.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

body.theme-dark .mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton,
body.cpd-theme-dark .mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid #27272a !important;
}

body.theme-dark .mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton:hover,
body.cpd-theme-dark .mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Buttons in Security Key dialogs */
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton,
.mx_CreateSecretStorageDialog .mx_Dialog_primary,
.mx_AccessSecretStorageDialog .mx_Dialog_primary,
.mx_RestoreKeyBackupDialog .mx_Dialog_primary {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Verification QR & SAS Start Options (Interactive Device Verification) */
.mx_VerificationPanel_QRPhase_startOptions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

.mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 28px 24px !important;
  min-height: auto !important;
  border-radius: 12px !important;
}

.mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_AccessibleButton,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_AccessibleButton,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_AccessibleButton {
  margin: 0 !important;
}

.mx_VerificationPanel_QRPhase_helpText {
  display: none !important;
}

/* Interactive Verification & SAS Dialogs */
.mx_VerificationShowSas {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.mx_Dialog .mx_VerificationShowSas,
.mx_Dialog:has(.mx_VerificationShowSas) .mx_VerificationShowSas {
  padding: 20px 24px 24px 24px !important;
}

.mx_VerificationShowSas > p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #a1a1aa !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body.theme-light .mx_VerificationShowSas > p,
body.cpd-theme-light .mx_VerificationShowSas > p {
  color: #64748b !important;
}

/* Aggressively collapse empty or blank paragraph tags generated during self verification */
.mx_VerificationShowSas > p:empty,
.mx_VerificationShowSas > p:blank,
.mx_VerificationShowSas > p:last-of-type:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

.mx_VerificationShowSas_emojiSas {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 18px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_VerificationShowSas_emojiSas_break {
  flex-basis: 100% !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_VerificationShowSas_emojiSas_block,
.mx_VerificationShowSas_emojiSas_block:hover,
.mx_VerificationShowSas_emojiSas_block:focus,
.mx_VerificationShowSas_emojiSas_block:active {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 96px !important;
  height: 84px !important;
  padding: 8px 6px !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

body.theme-light .mx_VerificationShowSas_emojiSas_block,
body.cpd-theme-light .mx_VerificationShowSas_emojiSas_block,
body.theme-light .mx_VerificationShowSas_emojiSas_block:hover,
body.cpd-theme-light .mx_VerificationShowSas_emojiSas_block:hover {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mx_VerificationShowSas_emojiSas_emoji,
.mx_VerificationShowSas_emojiSas_emoji * {
  font-size: 28px !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  text-align: center !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.mx_VerificationShowSas_emojiSas_label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #f4f4f5 !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  padding: 0 4px !important;
}

body.theme-light .mx_VerificationShowSas_emojiSas_label,
body.cpd-theme-light .mx_VerificationShowSas_emojiSas_label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Two-button action row: Side-by-side, perfectly balanced */
.mx_VerificationShowSas_buttonRow {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.mx_VerificationShowSas_buttonRow .mx_AccessibleButton {
  flex: 1 1 0 !important;
  width: 50% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Danger Button ("Không khớp") */
.mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger,
.mx_VerificationShowSas_buttonRow [data-kind="danger"] {
  background-color: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  box-shadow: none !important;
}

.mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger:hover,
.mx_VerificationShowSas_buttonRow [data-kind="danger"]:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

.mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger:active,
.mx_VerificationShowSas_buttonRow [data-kind="danger"]:active {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  transform: translateY(0) !important;
}

body.theme-light .mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger,
body.cpd-theme-light .mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger,
body.theme-light .mx_VerificationShowSas_buttonRow [data-kind="danger"],
body.cpd-theme-light .mx_VerificationShowSas_buttonRow [data-kind="danger"] {
  background-color: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #dc2626 !important;
}

body.theme-light .mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger:hover,
body.cpd-theme-light .mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_danger:hover,
body.theme-light .mx_VerificationShowSas_buttonRow [data-kind="danger"]:hover,
body.cpd-theme-light .mx_VerificationShowSas_buttonRow [data-kind="danger"]:hover {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Primary Button ("Trùng khớp") */
.mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_primary,
.mx_VerificationShowSas_buttonRow [data-kind="primary"] {
  background-color: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

.mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_primary:hover,
.mx_VerificationShowSas_buttonRow [data-kind="primary"]:hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

.mx_VerificationShowSas_buttonRow .mx_AccessibleButton_kind_primary:active,
.mx_VerificationShowSas_buttonRow [data-kind="primary"]:active {
  background-color: #047857 !important;
  border-color: #047857 !important;
  transform: translateY(0) !important;
}

/* ==========================================================================
   Global Anti-All-Caps & Dialog Polish: Clean, Natural Vietnamese Typography
   ========================================================================== */

/* Prevent forced ALL CAPS across all elements, dialogs, dividers, and headers */
.mx_RoomSublist_headerText,
.mx_InviteDialog,
.mx_InviteDialog *,
.mx_SpotlightDialog,
.mx_SpotlightDialog *,
.mx_Dialog,
.mx_Dialog *,
.mx_Heading_h1,
.mx_Heading_h2,
.mx_Heading_h3,
.mx_Heading_h4,
.mx_Heading_h5,
.mx_Heading_h6,
.mx_AccessibleButton,
.mx_TabLabel,
.mx_ContextualMenu,
.mx_ContextualMenu *,
.mx_SettingsTab_heading,
.mx_SettingsTab_subheading,
.mx_Divider,
.mx_Divider_text,
[class*="divider"],
[class*="Divider"],
[class*="headerText"],
[class*="sublist"] {
  text-transform: none !important;
}

/* Hide unnecessary suggestions disclaimer that causes user confusion */
.mx_InviteDialog_suggestions_disclaimer,
.mx_InviteDialog_helpText:has(> [data-testid="suggestions-disclaimer"]),
.mx_InviteDialog_disclaimer {
  display: none !important;
}

/* ==========================================================================
   SecureChat Direct Message & Invite Dialog Search Bar Polish
   ========================================================================== */

/* 0. Invite & DM Dialog Root & Content Containment */
.mx_Dialog .mx_InviteDialog_other,
.mx_Dialog .mx_InviteDialog_transfer,
.mx_Dialog > .mx_Dialog_fixedWidth,
.mx_Dialog .mx_Dialog_fixedWidth,
.mx_InviteDialog_other,
.mx_InviteDialog_transfer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.mx_Dialog .mx_InviteDialog_other .mx_Dialog_header,
.mx_Dialog .mx_InviteDialog_transfer .mx_Dialog_header {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 16px 24px !important;
  margin: 0 !important;
}

.mx_Dialog .mx_InviteDialog_content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 24px 24px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

.mx_Dialog .mx_InviteDialog_helpText {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 1. Address Bar Layout */
.mx_InviteDialog_addressBar,
.mx_InviteDialog_other .mx_InviteDialog_addressBar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 10px !important;
}

/* 2. Unified Search Editor Container */
.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  padding: 4px 14px !important;
  box-sizing: border-box !important;
  cursor: text !important;
  overflow: visible !important;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease !important;
}

/* Search Icon inside editor */
.mx_InviteDialog_addressBar .mx_InviteDialog_editor::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-right: 8px !important;
  background-color: var(--cpd-color-icon-secondary, #71717a) !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain !important;
  transition: background-color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within::before {
  background-color: #10b981 !important;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor:has(.mx_InviteDialog_userTile)::before {
  display: none !important;
}

/* Dark Mode Search Bar */
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor {
  background-color: #131417 !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover {
  border-color: #3f3f46 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within {
  border-color: #10b981 !important;
  background-color: #18191c !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Light Mode Search Bar */
body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover {
  border-color: #cbd5e1 !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within {
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 2px 8px rgba(16, 185, 129, 0.08) !important;
}

/* 3. Text Input inside the Editor - Strip All Standalone Borders & Outlines */
.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"],
.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"]:focus,
.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"]:focus-visible,
.mx_InviteDialog_addressBar .mx_InviteDialog_editor > input[type="text"]:hover,
.mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
.mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]:focus,
.mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]:focus-visible,
.mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]:hover,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus-visible,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus-visible,
body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input,
body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus,
body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus-visible,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus-visible,
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input,
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus,
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input:focus-visible {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  flex: 1 1 120px !important;
  min-width: 120px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"] {
  color: #f4f4f5 !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"] {
  color: #0f172a !important;
}

/* Placeholders */
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder {
  color: #71717a !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* 4. Action Button ("Tìm" / "Go" / "Mời") & Spinner */
.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
  height: 48px !important;
  min-height: 48px !important;
  min-width: 76px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-inline-start: 0 !important;
  cursor: pointer !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active / Enabled State */
.mx_InviteDialog_addressBar .mx_InviteDialog_goButton:not([aria-disabled="true"]):not(.mx_AccessibleButton_disabled) {
  background: #10b981 !important;
  background-color: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_goButton:not([aria-disabled="true"]):not(.mx_AccessibleButton_disabled):hover {
  background: #059669 !important;
  background-color: #059669 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px);
}

.mx_InviteDialog_addressBar .mx_InviteDialog_goButton:not([aria-disabled="true"]):not(.mx_AccessibleButton_disabled):active {
  background: #047857 !important;
  background-color: #047857 !important;
  transform: translateY(0);
}

/* Disabled State */
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_goButton[aria-disabled="true"],
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_goButton.mx_AccessibleButton_disabled,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_goButton[aria-disabled="true"],
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_goButton.mx_AccessibleButton_disabled,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_goButton[aria-disabled="true"],
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_goButton.mx_AccessibleButton_disabled {
  background: #1f2125 !important;
  background-color: #1f2125 !important;
  color: #71717a !important;
  border: 1.5px solid #27272a !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_goButton[aria-disabled="true"],
body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_goButton.mx_AccessibleButton_disabled,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_goButton[aria-disabled="true"],
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_goButton.mx_AccessibleButton_disabled {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_buttonAndSpinner .mx_Spinner {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin-left: 8px !important;
}

/* 5. User Selection Pills (Chips) */
.mx_InviteDialog_userTile {
  margin: 3px 6px 3px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 10px 0 6px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill,
body.theme-dark .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill,
body.cpd-theme-dark .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
  background-color: #27272a !important;
  border: 1px solid #3f3f46 !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill,
body.cpd-theme-light .mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill {
  background-color: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_pill .mx_SearchResultAvatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  position: static !important;
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  opacity: 0.65 !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
}

.mx_InviteDialog_userTile .mx_InviteDialog_userTile_remove:hover {
  opacity: 1 !important;
}

/* 6. Typography & Sections Polish */
.mx_InviteDialog_helpText {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 6px 0 2px 0 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_helpText,
body.theme-dark .mx_InviteDialog_helpText,
body.cpd-theme-dark .mx_InviteDialog_helpText {
  color: #a1a1aa !important;
}

body.theme-light .mx_InviteDialog_helpText,
body.cpd-theme-light .mx_InviteDialog_helpText {
  color: #64748b !important;
}

.mx_InviteDialog_helpText a {
  color: #10b981 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.mx_InviteDialog_helpText a:hover {
  text-decoration: underline !important;
}

.mx_InviteDialog_userSections,
.mx_InviteDialog_other .mx_InviteDialog_userSections {
  margin-top: 16px !important;
  padding: 0 !important;
  padding-inline-end: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.mx_InviteDialog_section_hidden_suggestions_disclaimer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.mx_InviteDialog_section h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 16px 0 8px 0 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_section h3,
body.theme-dark .mx_InviteDialog_section h3,
body.cpd-theme-dark .mx_InviteDialog_section h3 {
  color: #a1a1aa !important;
}

body.theme-light .mx_InviteDialog_section h3,
body.cpd-theme-light .mx_InviteDialog_section h3 {
  color: #64748b !important;
}

.mx_InviteDialog_tile {
  border-radius: 10px !important;
  padding: 8px 10px !important;
  transition: background-color 0.15s ease !important;
  cursor: pointer !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_tile:hover,
body.theme-dark .mx_InviteDialog_tile:hover,
body.cpd-theme-dark .mx_InviteDialog_tile:hover {
  background-color: #27272a !important;
}

body.theme-light .mx_InviteDialog_tile:hover,
body.cpd-theme-light .mx_InviteDialog_tile:hover {
  background-color: #f1f5f9 !important;
}

.mx_InviteDialog_footer {
  border-top: 1px solid var(--cpd-color-border-subtle, #27272a) !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.theme-light .mx_InviteDialog_footer,
body.cpd-theme-light .mx_InviteDialog_footer {
  border-top-color: #e2e8f0 !important;
}

.mx_InviteDialog_footer h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
}

.mx_InviteDialog_footer .mx_CopyableText {
  border-radius: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.mx_InviteDialog_footer .mx_CopyableText a,
.mx_InviteDialog_footer .mx_InviteDialog_footer_link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Universal Cursor Pointer Rule for all interactive controls across SecureChat
   ========================================================================== */
button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="file"]:not(:disabled),
select:not(:disabled),
summary,
.mx_AccessibleButton:not([aria-disabled="true"]):not(.mx_AccessibleButton_disabled),
[role="button"]:not([aria-disabled="true"]):not([disabled]),
[role="checkbox"]:not([aria-disabled="true"]):not([disabled]),
[role="radio"]:not([aria-disabled="true"]):not([disabled]),
[role="switch"]:not([aria-disabled="true"]):not([disabled]),
[role="tab"]:not([aria-disabled="true"]):not([disabled]),
[role="menuitem"]:not([aria-disabled="true"]):not([disabled]),
[role="menuitemcheckbox"]:not([aria-disabled="true"]):not([disabled]),
[role="menuitemradio"]:not([aria-disabled="true"]):not([disabled]),
[role="option"]:not([aria-disabled="true"]):not([disabled]),
[role="combobox"]:not([aria-disabled="true"]):not([disabled]),
[role="listbox"]:not([aria-disabled="true"]):not([disabled]),
.mx_Checkbox:not(.mx_Checkbox_disabled),
.mx_Checkbox_background,
.mx_StyledRadioButton,
.mx_ToggleSwitch:not(.mx_ToggleSwitch_disabled),
.mx_Dropdown,
.mx_Dropdown_input,
.mx_Dropdown_option,
.mx_Dropdown_menu,
.mx_RoomTile,
.mx_SpaceButton,
.mx_UserMenu,
.mx_TabbedView_tabLabel,
.mx_IconizedContextMenu_item,
.mx_ContextualMenu,
.mx_FilterTabSlider_tab,
.mx_RoomSublist_header,
.mx_RoomSublist_addRoom,
.mx_MessageActionBar_iconButton,
.mx_EmojiPicker_item,
.mx_ReactionPicker_item,
.mx_Stickerpicker_item,
.mx_SearchBar_button,
.mx_Dialog_primary,
.mx_Dialog_cancelButton,
[class*="_button_"]:not(:disabled):not([aria-disabled="true"]),
[class*="_checkbox_"]:not(:disabled):not([aria-disabled="true"]),
[class*="_switch_"]:not(:disabled):not([aria-disabled="true"]),
[class*="_select_"]:not(:disabled):not([aria-disabled="true"]),
[class*="_dropdown_"]:not(:disabled):not([aria-disabled="true"]),
[class*="_menu-item_"]:not(:disabled):not([aria-disabled="true"]),
label[for],
label:has(input:not(:disabled)),
label:has(button:not(:disabled)),
label:has(select:not(:disabled)) {
  cursor: pointer !important;
}

button:not(:disabled) *,
input[type="button"]:not(:disabled) *,
input[type="submit"]:not(:disabled) *,
.mx_AccessibleButton:not([aria-disabled="true"]):not(.mx_AccessibleButton_disabled) *,
[role="button"]:not([aria-disabled="true"]):not([disabled]) *,
[role="checkbox"]:not([aria-disabled="true"]):not([disabled]) *,
[role="radio"]:not([aria-disabled="true"]):not([disabled]) *,
[role="switch"]:not([aria-disabled="true"]):not([disabled]) *,
[role="tab"]:not([aria-disabled="true"]):not([disabled]) *,
[role="menuitem"]:not([aria-disabled="true"]):not([disabled]) *,
[role="menuitemcheckbox"]:not([aria-disabled="true"]):not([disabled]) *,
[role="menuitemradio"]:not([aria-disabled="true"]):not([disabled]) *,
[role="option"]:not([aria-disabled="true"]):not([disabled]) *,
.mx_Dropdown *,
.mx_Checkbox:not(.mx_Checkbox_disabled) *,
.mx_ToggleSwitch:not(.mx_ToggleSwitch_disabled) *,
[class*="_button_"]:not(:disabled):not([aria-disabled="true"]) *,
label[for] *,
label:has(input:not(:disabled)) * {
  cursor: inherit !important;
}

button:disabled,
input:disabled,
select:disabled,
[aria-disabled="true"],
.mx_AccessibleButton_disabled,
.mx_Checkbox_disabled,
.mx_ToggleSwitch_disabled,
[class*="_button_"][aria-disabled="true"],
[class*="_button_"]:disabled {
  cursor: not-allowed !important;
}

/* ==========================================================================
   Universal Icon Transparency & Mask Reset
   Guarantee transparent backgrounds and theme-adaptive rendering chat-wide
   ========================================================================== */

/* 1. Universal transparency for all icon containers, buttons, and elements */
svg,
svg *,
.sc-btn-icon,
.mx_Icon,
[class*="mx_Icon"],
[class*="_icon_"],
.mx_IconizedContextMenu_icon,
.mx_TabbedView_maskedIcon,
.mx_RoomSearch_icon,
.mx_SearchBox_searchIcon,
.mx_CreateSecretStorageDialog_optionIcon,
.cpd-icon-button,
.cpd-icon-button svg,
.cpd-button svg,
button svg,
.mx_AccessibleButton svg,
.mx_MessageActionBar_iconButton svg,
.mx_RoomHeader svg,
.mx_LeftPanel svg,
.mx_SpacePanel svg,
[class*="cpd-icon"],
[class*="Icon"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. Suppress residual CSS masks on actual SVG elements so they render cleanly */
svg,
svg *,
.sc-btn-icon,
.mx_Icon svg,
[class*="mx_Icon"] svg,
[class*="_icon_"] svg,
.mx_IconizedContextMenu_icon svg,
.mx_TabbedView_tabLabel svg,
.cpd-icon-button svg,
.cpd-button svg,
button svg,
.mx_AccessibleButton svg {
  mask: none !important;
  -webkit-mask: none !important;
}

/* 3. Completely eliminate any shield badge or pseudo-icon in Settings modal and headers */
.sc-verification-header-shield,
.mx_Dialog:has(.mx_UserSettingsDialog) .sc-verification-header-shield,
.mx_Dialog.mx_UserSettingsDialog .sc-verification-header-shield,
.mx_UserSettingsDialog .sc-verification-header-shield,
.mx_Dialog:has(.mx_TabbedView) .sc-verification-header-shield,
.mx_Dialog_header .sc-verification-header-shield,
.mx_Dialog:has(.mx_UserSettingsDialog) .sc-verification-helper-card,
.mx_Dialog:has(.mx_TabbedView) .sc-verification-helper-card {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure no ::before or ::after icon ever attaches to 'Cài đặt' heading in Settings */
.mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_title:before,
.mx_Dialog.mx_UserSettingsDialog .mx_Dialog_title:before,
.mx_Dialog:has(.mx_TabbedView) .mx_Dialog_title:before,
.mx_UserSettingsDialog .mx_Dialog_title:before,
.mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_titleWithIcon:before,
.mx_Dialog.mx_UserSettingsDialog .mx_Dialog_titleWithIcon:before,
.mx_Dialog:has(.mx_TabbedView) .mx_Dialog_titleWithIcon:before,
.mx_UserSettingsDialog .mx_Dialog_titleWithIcon:before,
.mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_title:after,
.mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_titleWithIcon:after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* Header icons in verified dialogs (Dark Mode) */
body:not(.theme-light):not(.cpd-theme-light) .mx_Dialog_titleWithIcon svg,
body.theme-dark .mx_Dialog_titleWithIcon svg,
body.cpd-theme-dark .mx_Dialog_titleWithIcon svg,
body:not(.theme-light):not(.cpd-theme-light) [class*="Verification"] [class*="title"] svg,
body.theme-dark [class*="Verification"] [class*="title"] svg,
body.cpd-theme-dark [class*="Verification"] [class*="title"] svg {
  color: #10b981 !important;
  stroke: #10b981 !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
}

/* Header icons in verified dialogs (Light Mode) */
body.theme-light .mx_Dialog_titleWithIcon svg,
body.cpd-theme-light .mx_Dialog_titleWithIcon svg,
body.theme-light [class*="Verification"] [class*="title"] svg,
body.cpd-theme-light [class*="Verification"] [class*="title"] svg {
  color: #059669 !important;
  stroke: #059669 !important;
  background: transparent !important;
}

/* ==========================================================================
   Universal Button Icon Styling (.sc-btn-icon)
   ========================================================================== */

.sc-btn-icon {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin-right: 6px !important;
  margin-left: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Action buttons in dialogs, modals, toasts, and settings */
.mx_Dialog_buttons button,
.mx_Dialog_buttons .mx_AccessibleButton,
.mx_VerificationPanel button,
.mx_VerificationPanel .mx_AccessibleButton,
.mx_Toast_buttons button,
.mx_Toast_buttons .mx_AccessibleButton,
.mx_Dialog button.mx_Dialog_primary,
.mx_Dialog .mx_AccessibleButton_kind_primary,
.sc-verification-dialog button,
.mx_SettingsTab button,
.mx_SettingsTab .mx_AccessibleButton,
.mx_DeviceSecurityCard .mx_AccessibleButton,
.cpd-button,
[class*="cpd-button"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* User Menu & Context Menu items: STRICT left-aligned horizontal flow, no centering */
.mx_IconizedContextMenu_item,
.mx_ContextualMenu [role="menuitem"],
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin: 1px 4px !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-align: left !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.mx_IconizedContextMenu_item:focus,
.mx_IconizedContextMenu_item:focus-visible,
.mx_IconizedContextMenu_item:active,
.mx_RoomSublist_header:focus,
.mx_RoomSublist_header:focus-visible,
.mx_RoomSublist_headerContainer:focus,
.mx_RoomSublist_stickable:focus,
.mx_RoomListHeader:focus,
.mx_SpaceButton:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.mx_IconizedContextMenu_item .mx_IconizedContextMenu_icon,
.mx_IconizedContextMenu_item [class*="_icon_"],
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_IconizedContextMenu_item .mx_IconizedContextMenu_label,
.mx_IconizedContextMenu_item [class*="_label_"],
.mx_UserMenu_contextMenu .mx_IconizedContextMenu_label,
.mx_IconizedContextMenu_label {
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* User Profile Popover: optimal compact spacing for items, icons, and buttons */
.mx_UserMenu_contextMenu {
  padding: 4px 0 !important;
}

.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header {
  padding: 12px 14px 8px 14px !important;
}

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_optionList {
  padding: 2px 0 !important;
  margin: 0 !important;
}

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_item {
  gap: 7px !important;
  padding: 6px 10px !important;
  margin: 1px 4px !important;
}

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_icon {
  margin: 0 !important;
  padding: 0 !important;
}

.mx_UserMenu_contextMenu .mx_IconizedContextMenu_label {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* User avatars: strictly suppress rogue icons, outlines, and badges */
.mx_UserMenu_userAvatar,
.mx_BaseAvatar,
[class*="_avatar_"],
.mx_RoomTile_avatar {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.mx_UserMenu_userAvatar .sc-btn-icon,
.mx_BaseAvatar .sc-btn-icon,
[class*="_avatar_"] .sc-btn-icon,
.mx_RoomTile_avatar .sc-btn-icon,
.mx_IconizedContextMenu .sc-btn-icon,
.mx_IconizedContextMenu_item .sc-btn-icon,
.mx_ContextualMenu .sc-btn-icon,
.mx_RoomSublist_header .sc-btn-icon,
.mx_RoomListHeader .sc-btn-icon,
.mx_SpaceButton .sc-btn-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Compound and AccessibleButton inner content wrappers */
.cpd-button__content,
[class*="cpd-button__content"],
button [class*="_content_"],
.cpd-button [class*="_content_"],
[class*="cpd-button"] [class*="_content_"],
.mx_AccessibleButton [class*="_content_"],
.mx_AccessibleButton_content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

/* Eliminate double spacing when flex gap is active */
.cpd-button__content > .sc-btn-icon,
[class*="cpd-button__content"] > .sc-btn-icon,
button [class*="_content_"] > .sc-btn-icon,
.cpd-button [class*="_content_"] > .sc-btn-icon,
[class*="cpd-button"] [class*="_content_"] > .sc-btn-icon,
.mx_AccessibleButton_content > .sc-btn-icon,
.cpd-button > .sc-btn-icon,
[class*="cpd-button"] > .sc-btn-icon,
.mx_AccessibleButton > .sc-btn-icon,
button > .sc-btn-icon {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Icon-only buttons: ensure perfect centering without margin offsets */
.cpd-button--icon-only,
.cpd-icon-button,
[class*="cpd-icon-button"],
.cpd-button--icon-only svg,
.cpd-icon-button svg,
[class*="cpd-icon-button"] svg,
button:has(> svg:only-child) svg,
.mx_AccessibleButton:has(> svg:only-child) svg,
button:has(> .sc-btn-icon:only-child) .sc-btn-icon,
.cpd-button:has(> .sc-btn-icon:only-child) .sc-btn-icon,
.cpd-button__content:has(> .sc-btn-icon:only-child) .sc-btn-icon,
[class*="cpd-button__content"]:has(> .sc-btn-icon:only-child) .sc-btn-icon,
button [class*="_content_"]:has(> .sc-btn-icon:only-child) .sc-btn-icon,
.cpd-button [class*="_content_"]:has(> .sc-btn-icon:only-child) .sc-btn-icon,
.mx_AccessibleButton_content:has(> .sc-btn-icon:only-child) .sc-btn-icon {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Modal action button icons (.sc-btn-icon) use stroke */
.sc-btn-icon {
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* Compound icons use fill - NEVER force stroke on them */
.cpd-button svg,
.cpd-icon-button svg,
[class*="cpd-button"] svg,
[class*="cpd-icon-button"] svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Light Mode Icon Standardization */
body.theme-light,
body.cpd-theme-light {
  --cpd-color-icon-primary: #0f172a !important;
  --cpd-color-icon-secondary: #475569 !important;
  --cpd-color-icon-tertiary: #64748b !important;
  --icon-button-color: #475569 !important;
  --primary-content: #0f172a !important;
  --secondary-content: #475569 !important;
  --tertiary-content: #64748b !important;
}

/* Theme-Adaptive Icon Tokens */
body.theme-light,
body.cpd-theme-light,
html.theme-light,
html.cpd-theme-light {
  --cpd-color-icon-primary: #0f172a !important;
  --cpd-color-icon-secondary: #64748b !important;
  --cpd-color-icon-tertiary: #94a3b8 !important;
  --cpd-color-icon-accent: #059669 !important;
  --icon-button-color: #64748b !important;
  --primary-content: #0f172a !important;
  --secondary-content: #64748b !important;
  --tertiary-content: #94a3b8 !important;
}

body.theme-light .mx_IconizedContextMenu_icon,
body.cpd-theme-light .mx_IconizedContextMenu_icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #64748b !important;
}

body.theme-light .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon,
body.cpd-theme-light .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #0f172a !important;
}

body.theme-light .cpd-icon-button,
body.cpd-theme-light .cpd-icon-button {
  color: #64748b !important;
  background: transparent !important;
}

body.theme-light .cpd-icon-button:hover,
body.cpd-theme-light .cpd-icon-button:hover {
  color: #0f172a !important;
}

/* Dark Mode Icon Standardization */
body:not(.theme-light):not(.cpd-theme-light),
body.theme-dark,
body.cpd-theme-dark,
html:not(.theme-light):not(.cpd-theme-light),
html.theme-dark,
html.cpd-theme-dark {
  --cpd-color-icon-primary: #f4f4f5 !important;
  --cpd-color-icon-secondary: #a1a1aa !important;
  --cpd-color-icon-tertiary: #71717a !important;
  --cpd-color-icon-accent: #10b981 !important;
  --icon-button-color: #a1a1aa !important;
  --primary-content: #f4f4f5 !important;
  --secondary-content: #a1a1aa !important;
  --tertiary-content: #71717a !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_IconizedContextMenu_icon,
body.theme-dark .mx_IconizedContextMenu_icon,
body.cpd-theme-dark .mx_IconizedContextMenu_icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #a1a1aa !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon,
body.theme-dark .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon,
body.cpd-theme-dark .mx_IconizedContextMenu_item:hover .mx_IconizedContextMenu_icon {
  background: transparent !important;
  background-color: transparent !important;
  color: #f4f4f5 !important;
}

/* Primary Green Buttons: Always White Icons in Both Light & Dark Themes */
.cpd-button--kind-primary,
.mx_AccessibleButton_kind_primary,
.mx_Dialog_primary,
button[data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *),
button[class*="primary"],
input[type="submit"].mx_Dialog_primary,
.mx_MessageComposer_sendMessage {
  --cpd-color-icon-primary: #ffffff !important;
  --cpd-color-icon-secondary: #ffffff !important;
  --icon-button-color: #ffffff !important;
  color: #ffffff !important;
}

.cpd-button--kind-primary .sc-btn-icon,
.mx_AccessibleButton_kind_primary .sc-btn-icon,
.mx_Dialog_primary .sc-btn-icon,
button[data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) .sc-btn-icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.cpd-button--kind-primary svg:not(.sc-btn-icon),
.mx_AccessibleButton_kind_primary svg:not(.sc-btn-icon),
.mx_Dialog_primary svg:not(.sc-btn-icon),
button[data-kind="primary"]:not([role^="menuitem"]):not([class*="_item_"]):not([role="menubar"] *) svg:not(.sc-btn-icon) {
  fill: currentColor !important;
  stroke: none !important;
  color: #ffffff !important;
}

/* Send message button and native filled primary icons: preserve fill */
.mx_MessageComposer_sendMessage svg,
button[class*="primary"] svg:not(.sc-btn-icon),
.cpd-button--kind-primary svg:not(.sc-btn-icon) {
  fill: currentColor !important;
  stroke: none !important;
  color: #ffffff !important;
}

.mx_MessageComposer_sendMessage {
  background-color: #10b981 !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease !important;
}

.mx_MessageComposer_sendMessage:hover {
  background-color: #059669 !important;
}

.mx_MessageComposer_sendMessage:disabled,
.mx_MessageComposer_sendMessage[aria-disabled="true"] {
  opacity: 0.45 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   Verification Helper Card (User-Friendly Explanations)
   ========================================================================== */

.sc-verification-helper-card {
  margin: 16px 0 !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

body:not(.theme-light):not(.cpd-theme-light) .sc-verification-helper-card,
body.theme-dark .sc-verification-helper-card,
body.cpd-theme-dark .sc-verification-helper-card {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #e4e4e7 !important;
}

body.theme-light .sc-verification-helper-card,
body.cpd-theme-light .sc-verification-helper-card {
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #1e293b !important;
}

.sc-vh-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}

.sc-vh-icon {
  font-size: 16px !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Device Verification Modal - Enhanced Reset Security Key Button
   ========================================================================== */

/* Container section with clean separator */
.sc-reset-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

body.theme-light .sc-reset-section,
body.cpd-theme-light .sc-reset-section {
  border-top: 1px solid #e2e8f0 !important;
}

/* Question prompt above the button */
.sc-reset-prompt {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
}

body.theme-light .sc-reset-prompt,
body.cpd-theme-light .sc-reset-prompt {
  color: #64748b !important;
}

/* Prominent Secondary Action Button for Resetting Key */
.sc-reset-button.mx_AccessibleButton,
.mx_Dialog .sc-reset-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: center !important;
}

/* Dark Theme Reset Button */
body:not(.theme-light):not(.cpd-theme-light) .sc-reset-button,
body.theme-dark .sc-reset-button,
body.cpd-theme-dark .sc-reset-button {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

body:not(.theme-light):not(.cpd-theme-light) .sc-reset-button:hover,
body.theme-dark .sc-reset-button:hover,
body.cpd-theme-dark .sc-reset-button:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Light Theme Reset Button */
body.theme-light .sc-reset-button,
body.cpd-theme-light .sc-reset-button {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .sc-reset-button:hover,
body.cpd-theme-light .sc-reset-button:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #020617 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Key icon inside reset button */
.sc-reset-button .sc-btn-icon {
  color: #10b981 !important;
  stroke: #10b981 !important;
}

body.theme-light .sc-reset-button .sc-btn-icon,
body.cpd-theme-light .sc-reset-button .sc-btn-icon {
  color: #059669 !important;
  stroke: #059669 !important;
}

/* Fallback link styling */
.mx_Dialog .mx_CompleteSecurity_reset a,
.sc-verification-dialog a:not(.sc-reset-button) {
  color: #10b981 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Mobile & Tablet Responsiveness Overrides
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Mobile dialog sizing */
  .mx_Dialog {
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 767.98px) {
  /* Mobile dialog layout & centering */
  .mx_Dialog_wrapper {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
  }

  .mx_Dialog {
    width: calc(100vw - 24px) !important;
    max-width: 460px !important;
    max-height: calc(100dvh - 24px) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  /* Verification dialog responsive stacking & flattened wrappers */
  .mx_VerificationRequestDialog,
  .mx_DeviceVerifyDialog,
  .mx_Dialog:has(.sc-verification-helper-card),
  .sc-verification-dialog,
  .mx_CreateRoomDialog {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .mx_VerificationRequestDialog .mx_Dialog_buttons,
  .mx_DeviceVerifyDialog .mx_Dialog_buttons,
  .sc-verification-dialog .mx_Dialog_buttons,
  .mx_Dialog_buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .mx_Dialog_buttons button,
  .mx_Dialog_buttons .mx_AccessibleButton,
  .mx_VerificationPanel button,
  .sc-verification-dialog button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* Prevent iOS automatic zoom on text input focus */
  .mx_CreateRoomDialog input[type="text"],
  .mx_CreateRoomDialog textarea,
  .mx_Dialog input[type="text"],
  .mx_Dialog input[type="password"] {
    font-size: 16px !important;
  }

  /* Settings modal on mobile */
  .mx_UserSettingsDialog {
    width: calc(100vw - 16px) !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }

  .mx_UserSettingsDialog .mx_TabbedView {
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .mx_UserSettingsDialog .mx_TabbedView_tabPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Toast notifications on mobile */
  .mx_ToastContainer,
  .mx_NonUrgentToastContainer {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }

  .mx_Toast_toast {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   Comprehensive Settings Tabs Responsive Architecture (Mobile & Tablet)
   ========================================================================== */

/* Mobile Settings Dialog Base (<= 767.98px) */
@media (max-width: 767.98px) {
  .mx_Dialog:has(.mx_UserSettingsDialog),
  .mx_Dialog.mx_UserSettingsDialog,
  .mx_Dialog:has(.mx_SpaceSettingsDialog),
  .mx_Dialog.mx_SpaceSettingsDialog,
  .mx_Dialog:has(.mx_RoomSettingsDialog),
  .mx_Dialog.mx_RoomSettingsDialog,
  .mx_Dialog:has(.mx_TabbedView),
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog {
    width: 94vw !important;
    max-width: 960px !important;
    height: 88vh !important;
    max-height: 840px !important;
    border-radius: 16px !important;
  }

  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog_border {
    width: 94vw !important;
    max-width: 960px !important;
    height: 88vh !important;
    max-height: 840px !important;
    border-radius: 16px !important;
  }

  .mx_TabbedView_tabLabels,
  .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 10px 16px !important;
    gap: 8px !important;
    border-right: none !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mx_TabbedView_tabLabels::-webkit-scrollbar {
    display: none !important;
  }

  .mx_TabbedView_tabLabel {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    border-radius: 9999px !important;
    min-height: 38px !important;
    font-size: 13.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
  }

  .mx_TabbedView_tabPanelContent {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 20px 24px 44px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Reset upstream 580px min-width and 80px-100px margins/paddings */
  .mx_SettingsTab,
  .mx_UserSettingsDialog .mx_TabbedView .mx_SettingsTab,
  .mx_RoomSettingsDialog .mx_TabbedView .mx_SettingsTab,
  .mx_SpaceSettingsDialog .mx_TabbedView .mx_SettingsTab {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    padding-right: 0 !important;
  }

  .mx_SettingsTab_section .mx_SettingsFlag,
  .mx_SettingsTab_section > p,
  .mx_SettingsTab_subsectionText {
    margin-inline-end: 0 !important;
  }

  /* Remove 360px min-width dropdown overflow */
  .mx_SettingsSubsection_content .mx_SettingsSubsection_dropdown {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent Image Size selector 578px overflow */
  .mx_ImageSizePanel_radios {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .mx_ImageSizePanel_radios > label {
    margin-right: 0 !important;
    flex: 0 1 auto !important;
  }
}

/* Mobile Portrait (<= 767.98px) */
@media (max-width: 767.98px) {
  .mx_Dialog:has(.mx_UserSettingsDialog),
  .mx_Dialog.mx_UserSettingsDialog,
  .mx_Dialog:has(.mx_SpaceSettingsDialog),
  .mx_Dialog.mx_SpaceSettingsDialog,
  .mx_Dialog:has(.mx_RoomSettingsDialog),
  .mx_Dialog.mx_RoomSettingsDialog,
  .mx_Dialog:has(.mx_TabbedView),
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog,
  .mx_UserSettingsDialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
    margin: auto !important;
  }

  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog_border {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
  }

  .mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_header,
  .mx_Dialog.mx_UserSettingsDialog .mx_Dialog_header,
  .mx_Dialog:has(.mx_TabbedView) .mx_Dialog_header {
    padding: 12px 16px !important;
    min-height: 52px !important;
  }

  .mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_cancelButton,
  .mx_Dialog.mx_UserSettingsDialog .mx_Dialog_cancelButton,
  .mx_Dialog:has(.mx_TabbedView) .mx_Dialog_cancelButton {
    top: 10px !important;
    right: 14px !important;
  }

  .mx_TabbedView_tabPanelContent {
    padding: 16px 16px 40px !important;
  }

  .mx_UserSettingsDialog,
  .mx_SpaceSettingsDialog,
  .mx_RoomSettingsDialog {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .mx_SettingsDialog_content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* APPEARANCE TAB (Mobile & Tablet) */
  .mx_ThemeChoicePanel_ThemeSelectors {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mx_ThemeChoicePanel_themeSelector {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }


  .mx_LayoutSwitcher_LayoutSelector {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
    padding: 10px 14px !important;
    min-height: 40px !important;
  }

  .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
    margin: 0 !important;
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mx_FontScalingPanel_Dropdown {
    width: 100% !important;
    max-width: 260px !important;
  }

  .mx_ImageSizePanel_radios {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .mx_ImageSizePanel_radios > label {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mx_ImageSizePanel_size {
    width: 100% !important;
    max-width: 160px !important;
    height: 90px !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
    mask-position: center !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
  }

  /* DEVICES TAB */
  .mx_FilteredDeviceList_deviceDetails,
  .mx_CurrentDeviceSection_deviceDetails {
    margin-left: 0 !important;
    margin-top: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mx_FilteredDeviceListHeader {
    height: auto !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
  }

  .mx_FilteredDeviceListHeader_label {
    flex: 1 1 auto !important;
    min-width: 130px !important;
  }

  .mx_DeviceTile {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .mx_DeviceTile_info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .mx_DeviceTile_actions {
    margin-left: 8px !important;
    gap: 6px !important;
  }

  .mx_DeviceTile_actions button,
  .mx_DeviceTile_actions .mx_AccessibleButton {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .mx_DeviceSecurityCard {
    border-radius: 12px !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mx_DeviceSecurityCard_icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin-right: 0 !important;
    border-radius: 10px !important;
  }

  .mx_DeviceSecurityCard_actions {
    margin-top: 12px !important;
  }

  .mx_DeviceSecurityCard_actions button,
  .mx_DeviceSecurityCard_actions .mx_AccessibleButton {
    min-height: 42px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .mx_DeviceDetails {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
  }

  /* NOTIFICATIONS TAB */
  .mx_NotificationSettings2 .mx_StyledRadioButton {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .mx_UserNotifSettings_grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(140px, 1fr) repeat(3, 56px) !important;
    grid-gap: 8px 6px !important;
  }

  .mx_UserNotifSettings_gridColumnLabel {
    font-size: 12px !important;
    text-align: center !important;
  }

  .mx_TagComposer .mx_TagComposer_tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .mx_TagComposer .mx_TagComposer_tags .mx_Tag {
    border-radius: 9999px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
}

/* Compact Mobile (<= 480px) */
@media (max-width: 480px) {
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog),
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog),
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog),
  .mx_Dialog_wrapper:has(.mx_TabbedView) {
    padding: 0 !important;
  }

  .mx_Dialog:has(.mx_UserSettingsDialog),
  .mx_Dialog.mx_UserSettingsDialog,
  .mx_Dialog:has(.mx_SpaceSettingsDialog),
  .mx_Dialog.mx_SpaceSettingsDialog,
  .mx_Dialog:has(.mx_RoomSettingsDialog),
  .mx_Dialog.mx_RoomSettingsDialog,
  .mx_Dialog:has(.mx_TabbedView),
  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog,
  .mx_UserSettingsDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mx_SpaceSettingsDialog,
  .mx_RoomSettingsDialog {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .mx_SettingsDialog_content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100% - 50px) !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .mx_Dialog_wrapper:has(.mx_UserSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_SpaceSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_RoomSettingsDialog) .mx_Dialog_border,
  .mx_Dialog_wrapper:has(.mx_TabbedView) .mx_Dialog_border {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_header,
  .mx_Dialog.mx_UserSettingsDialog .mx_Dialog_header,
  .mx_Dialog:has(.mx_TabbedView) .mx_Dialog_header {
    padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px 14px !important;
    min-height: 50px !important;
  }

  .mx_Dialog:has(.mx_UserSettingsDialog) .mx_Dialog_title,
  .mx_Dialog.mx_UserSettingsDialog .mx_Dialog_title,
  .mx_Dialog:has(.mx_TabbedView) .mx_Dialog_title {
    font-size: 16px !important;
  }

  .mx_TabbedView_tabLabels,
  .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabels {
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  .mx_TabbedView_tabLabel {
    padding: 6px 12px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  .mx_TabbedView_tabPanelContent {
    padding: 14px 12px max(32px, env(safe-area-inset-bottom, 0px)) 12px !important;
  }

  .mx_ThemeChoicePanel_ThemeSelectors {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .mx_ThemeChoicePanel_themeSelector {
    padding: 10px 10px !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
    margin: 10px !important;
  }

  .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
    margin: 0 10px 10px 10px !important;
    width: calc(100% - 20px) !important;
  }

  .mx_ImageSizePanel_radios > label {
    flex: 1 1 100% !important;
  }

  .mx_ImageSizePanel_size {
    height: 100px !important;
  }

  .mx_DeviceDetails_metadataTable {
    padding: 10px 12px !important;
  }

  .mx_DeviceDetails_metadataTable tbody tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 3px 0 !important;
  }

  .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel {
    width: 100% !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue {
    width: 100% !important;
    text-align: left !important;
    word-break: break-all !important;
    font-size: 12.5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mx_UserNotifSettings_grid {
    grid-template-columns: minmax(110px, 1fr) repeat(3, 44px) !important;
    grid-gap: 6px 4px !important;
  }

  .mx_UserNotifSettings_gridRowLabel {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  .mx_UserNotifSettings_gridColumnLabel {
    font-size: 11px !important;
  }

  .mx_UserNotifSettings_grid .mx_StyledRadioButton {
    min-height: 38px !important;
    min-width: 38px !important;
  }

  .mx_SettingsTab button,
  .mx_SettingsTab .mx_AccessibleButton {
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   Comprehensive Universal Search Bar & Focus Ring Polish
   (Direct Messages, In-Room Search, Modals, Directory, Emoji, Member List)
   ========================================================================== */

/* 1. Universal Inner Input Reset (Eliminates Nested Borders & Standalone Focus Rings) */
html body .mx_InviteDialog_editor input,
html body .mx_InviteDialog_editor input[type="text"],
html body .mx_InviteDialog_addressBar input,
html body .mx_InviteDialog_addressBar input[type="text"],
html body .mx_AutocompleteInput input,
html body .mx_AutocompleteInput input[type="text"],
html body .mx_AutocompleteInput_editor input,
html body .mx_AutocompleteInput_editor input[type="text"],
html body .mx_AutocompleteInput_editor > input,
html body .mx_AutocompleteInput_editor > input[type="text"],
html body .mx_SearchBox input:not(#sc),
html body .mx_SearchBox input:not(#sc):focus,
html body .mx_SearchBox input:not(#sc):hover,
html body .mx_EmojiPicker_search input:not(#sc),
html body .mx_EmojiPicker_search input:not(#sc):focus,
html body .mx_EmojiPicker_search input:not(#sc):hover,
html body .mx_DirectorySearchBox input:not(#sc),
html body .mx_DirectorySearchBox input:not(#sc):focus,
html body .mx_DirectorySearchBox input:not(#sc):hover,
html body .mx_MemberList .mx_SearchBox input:not(#sc),
html body .mx_MemberList .mx_SearchBox input:not(#sc):focus,
html body .mx_MemberList .mx_SearchBox input:not(#sc):hover,
html body .mx_RoomSummaryCard_search input:not(#sc),
html body .mx_RoomSummaryCard_search input:not(#sc):focus,
html body .mx_RoomSummaryCard_search input:not(#sc):hover,
html body [class*="_search_"] input:not(#sc),
html body [class*="_search_"] input:not(#sc):focus,
html body [class*="_search_"] input:not(#sc):hover,
html body .mx_Dropdown_input input:not(#sc),
html body .mx_Dropdown_input input:not(#sc):focus,
html body .mx_Dropdown_input input:not(#sc):hover,
html body .mx_SearchBar input,
html body .mx_SearchBar_input {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html body .mx_InviteDialog_editor input:focus,
html body .mx_InviteDialog_editor input:focus-visible,
html body .mx_InviteDialog_addressBar input:focus,
html body .mx_InviteDialog_addressBar input:focus-visible,
html body .mx_AutocompleteInput input:focus,
html body .mx_AutocompleteInput input:focus-visible,
html body .mx_AutocompleteInput_editor input:focus,
html body .mx_AutocompleteInput_editor input:focus-visible,
html body .mx_AutocompleteInput_editor > input:focus,
html body .mx_AutocompleteInput_editor > input:focus-visible,
html body .mx_RoomSummaryCard_search input:focus,
html body [class*="_search_"] input:focus,
html body .mx_SearchBar input:focus,
html body .mx_SearchBar_input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 2. Direct Message / Invite Search Bar Perfection */
.mx_InviteDialog_addressBar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.mx_InviteDialog_addressBar .mx_InviteDialog_editor {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 4px 12px !important;
  box-sizing: border-box !important;
  cursor: text !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* DM Editor Dark Theme */
body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor {
  background-color: #131417 !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover {
  border-color: #3f3f46 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within {
  border-color: #10b981 !important;
  background-color: #16171a !important;
  box-shadow: none !important;
}

/* DM Editor Light Theme */
body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor {
  background-color: #f8fafc !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor:focus-within {
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* DM Editor Input Inner Sizing & Colors */
.mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"] {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  flex: 1 1 140px !important;
  min-width: 140px !important;
  caret-color: #10b981 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"] {
  color: #f4f4f5 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder,
body.theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder,
body.cpd-theme-dark .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder {
  color: #71717a !important;
  opacity: 1 !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"],
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"] {
  color: #0f172a !important;
}

body.theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder,
body.cpd-theme-light .mx_InviteDialog_addressBar .mx_InviteDialog_editor input[type="text"]::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* DM Go / "Tìm" Button */
.mx_InviteDialog_addressBar .mx_InviteDialog_goButton {
  height: 44px !important;
  min-height: 44px !important;
  line-height: 42px !important;
  min-width: 72px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

/* 3. Universal SearchBox (.mx_SearchBox in Modals, Panels, and Lists) */
.mx_SearchBox,
.mx_Dialog .mx_SearchBox,
.mx_SpaceHierarchy .mx_SearchBox,
.mx_ForwardDialog .mx_SearchBox,
.mx_AddExistingToSpaceDialog .mx_SearchBox,
.mx_ManageRestrictedJoinRuleDialog .mx_SearchBox,
.mx_SpaceChildrenPicker .mx_SearchBox,
.mx_SpaceRoomView .mx_SearchBox {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}

.mx_SearchBox input,
.mx_Dialog .mx_SearchBox input {
  height: 100% !important;
  font-size: 13.5px !important;
  line-height: normal !important;
  padding-right: 8px !important;
}

/* Dark Mode Theme Colors for All Secondary Search Wrappers */
body.cpd-theme-dark .mx_SearchBox:not(.mx_LeftPanel *),
body.theme-dark .mx_SearchBox:not(.mx_LeftPanel *),
body:not(.cpd-theme-light):not(.theme-light) .mx_SearchBox:not(.mx_LeftPanel *),
body.cpd-theme-dark .mx_EmojiPicker_search,
body.theme-dark .mx_EmojiPicker_search,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_search,
body.cpd-theme-dark .mx_DirectorySearchBox,
body.theme-dark .mx_DirectorySearchBox,
body:not(.cpd-theme-light):not(.theme-light) .mx_DirectorySearchBox {
  border: 1px solid #27272a !important;
  background-color: #131417 !important;
  color: var(--cpd-color-text-primary, #ffffff) !important;
}

body.cpd-theme-dark .mx_SearchBox:not(.mx_LeftPanel *):hover,
body.theme-dark .mx_SearchBox:not(.mx_LeftPanel *):hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_SearchBox:not(.mx_LeftPanel *):hover,
body.cpd-theme-dark .mx_EmojiPicker_search:hover,
body.theme-dark .mx_EmojiPicker_search:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_search:hover,
body.cpd-theme-dark .mx_DirectorySearchBox:hover,
body.theme-dark .mx_DirectorySearchBox:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_DirectorySearchBox:hover {
  border-color: #3f3f46 !important;
  background-color: #18191c !important;
}

body.cpd-theme-dark .mx_SearchBox:not(.mx_LeftPanel *):focus-within,
body.theme-dark .mx_SearchBox:not(.mx_LeftPanel *):focus-within,
body:not(.cpd-theme-light):not(.theme-light) .mx_SearchBox:not(.mx_LeftPanel *):focus-within,
body.cpd-theme-dark .mx_EmojiPicker_search:focus-within,
body.theme-dark .mx_EmojiPicker_search:focus-within,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_search:focus-within,
body.cpd-theme-dark .mx_DirectorySearchBox:focus-within,
body.theme-dark .mx_DirectorySearchBox:focus-within,
body:not(.cpd-theme-light):not(.theme-light) .mx_DirectorySearchBox:focus-within {
  border-color: #10b981 !important;
  background-color: #131417 !important;
  box-shadow: none !important;
}

/* Light Mode Theme Colors for All Secondary Search Wrappers */
body.cpd-theme-light .mx_SearchBox:not(.mx_LeftPanel *),
body.theme-light .mx_SearchBox:not(.mx_LeftPanel *),
body.cpd-theme-light .mx_EmojiPicker_search,
body.theme-light .mx_EmojiPicker_search,
body.cpd-theme-light .mx_DirectorySearchBox,
body.theme-light .mx_DirectorySearchBox {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: var(--cpd-color-text-primary, #0f172a) !important;
}

body.cpd-theme-light .mx_SearchBox:not(.mx_LeftPanel *):hover,
body.theme-light .mx_SearchBox:not(.mx_LeftPanel *):hover,
body.cpd-theme-light .mx_EmojiPicker_search:hover,
body.theme-light .mx_EmojiPicker_search:hover,
body.cpd-theme-light .mx_DirectorySearchBox:hover,
body.theme-light .mx_DirectorySearchBox:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

body.cpd-theme-light .mx_SearchBox:not(.mx_LeftPanel *):focus-within,
body.theme-light .mx_SearchBox:not(.mx_LeftPanel *):focus-within,
body.cpd-theme-light .mx_EmojiPicker_search:focus-within,
body.theme-light .mx_EmojiPicker_search:focus-within,
body.cpd-theme-light .mx_DirectorySearchBox:focus-within,
body.theme-light .mx_DirectorySearchBox:focus-within {
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* 4. In-Room Search & Aux Panel (Compound Web Search & Wrapper) */
.mx_RoomSummaryCard_search [class*="_search_"],
.mx_SearchBar {
  display: flex !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  border-radius: 9999px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.cpd-theme-dark .mx_RoomSummaryCard_search [class*="_search_"],
body.theme-dark .mx_RoomSummaryCard_search [class*="_search_"],
body.cpd-theme-dark .mx_SearchBar,
body.theme-dark .mx_SearchBar {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
  color: var(--cpd-color-text-primary, #ffffff) !important;
}

body.cpd-theme-dark .mx_RoomSummaryCard_search [class*="_search_"]:focus-within,
body.theme-dark .mx_RoomSummaryCard_search [class*="_search_"]:focus-within,
body.cpd-theme-dark .mx_SearchBar:focus-within,
body.theme-dark .mx_SearchBar:focus-within {
  border-color: #10b981 !important;
  background-color: #131417 !important;
  box-shadow: none !important;
}

body.cpd-theme-light .mx_RoomSummaryCard_search [class*="_search_"],
body.theme-light .mx_RoomSummaryCard_search [class*="_search_"],
body:not(.cpd-theme-dark):not(.theme-dark) .mx_RoomSummaryCard_search [class*="_search_"],
body.cpd-theme-light .mx_SearchBar,
body.theme-light .mx_SearchBar,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_SearchBar {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  color: var(--cpd-color-text-primary, #0f172a) !important;
}

body.cpd-theme-light .mx_RoomSummaryCard_search [class*="_search_"]:focus-within,
body.theme-light .mx_RoomSummaryCard_search [class*="_search_"]:focus-within,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_RoomSummaryCard_search [class*="_search_"]:focus-within,
body.cpd-theme-light .mx_SearchBar:focus-within,
body.theme-light .mx_SearchBar:focus-within,
body:not(.cpd-theme-dark):not(.theme-dark) .mx_SearchBar:focus-within {
  background-color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: none !important;
}

/* 5. Profile Popover Dark/Light Mode Toggle Button Polish */
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton,
.mx_UserMenu_contextMenu_themeButton {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

body.cpd-theme-dark .mx_UserMenu_contextMenu_themeButton,
body.theme-dark .mx_UserMenu_contextMenu_themeButton,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserMenu_contextMenu_themeButton {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.cpd-theme-dark .mx_UserMenu_contextMenu_themeButton:hover,
body.theme-dark .mx_UserMenu_contextMenu_themeButton:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserMenu_contextMenu_themeButton:hover {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.05) !important;
}

body.cpd-theme-light .mx_UserMenu_contextMenu_themeButton,
body.theme-light .mx_UserMenu_contextMenu_themeButton {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-light .mx_UserMenu_contextMenu_themeButton:hover,
body.theme-light .mx_UserMenu_contextMenu_themeButton:hover {
  background-color: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.05) !important;
}

/* Hide default static theme icon inside the theme button */
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton img,
.mx_UserMenu_contextMenu_themeButton img {
  display: none !important;
}

/* Theme Toggle Button Icon: Moon in dark mode, Sun in light mode */
body.cpd-theme-dark .mx_UserMenu_contextMenu_themeButton::before,
body.theme-dark .mx_UserMenu_contextMenu_themeButton::before,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserMenu_contextMenu_themeButton::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background-color: #f4f4f5 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

body.cpd-theme-light .mx_UserMenu_contextMenu_themeButton::before,
body.theme-light .mx_UserMenu_contextMenu_themeButton::before,
body[class*="light"] .mx_UserMenu_contextMenu_themeButton::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background-color: #0f172a !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Hide Custom Themes panel & High Contrast theme options completely (only show Light and Dark) */
.mx_ThemeChoicePanel_CustomTheme,
.mx_ThemeChoicePanel_CustomThemeList,
.mx_ThemeChoicePanel_CustomTheme_EditInPlace,
.mx_SettingsTab_section:has(.mx_ThemeChoicePanel_CustomTheme),
.mx_SettingsTab_section:has(.mx_ThemeChoicePanel_CustomThemeList),
.mx_SettingsTab_section:has(.mx_ThemeChoicePanel_CustomTheme_EditInPlace),
.mx_ThemeChoicePanel_themeSelector:has([value*="custom"]),
.mx_ThemeChoicePanel [value*="custom"],
.mx_StyledRadioButton[value*="custom"],
input[value*="custom"],
label:has(input[value*="custom"]),
.mx_ThemeChoicePanel_themeSelector:has([value*="high-contrast"]),
.mx_ThemeChoicePanel_themeSelector:has([value*="hc"]),
.mx_ThemeChoicePanel [value*="high-contrast"],
.mx_ThemeChoicePanel [value*="hc"],
.mx_StyledRadioButton[value*="high-contrast"],
.mx_StyledRadioButton[value*="hc"],
input[value*="high-contrast"],
input[value*="hc"],
label:has(input[value*="high-contrast"]),
label:has(input[value*="hc"]),
div:has(> input[value*="high-contrast"]),
div:has(> input[value*="hc"]),
[data-testid*="high-contrast"],
[data-testid*="high_contrast"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   21. Search Modal, Room Search Results, Filter Pills & Highlighting Polish
   ========================================================================== */

/* 1. Global Text Selection & Mark Highlighting */
body.theme-dark ::selection,
body.cpd-theme-dark ::selection,
body:not(.theme-light):not(.cpd-theme-light) ::selection {
  background-color: rgba(16, 185, 129, 0.4) !important;
  color: #ffffff !important;
}

body.theme-light ::selection,
body.cpd-theme-light ::selection {
  background-color: rgba(16, 185, 129, 0.28) !important;
  color: #064e3b !important;
}

body.theme-dark mark,
body.cpd-theme-dark mark,
body:not(.theme-light):not(.cpd-theme-light) mark {
  background-color: rgba(16, 185, 129, 0.3) !important;
  color: #f4f4f5 !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
}

body.theme-light mark,
body.cpd-theme-light mark {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #065f46 !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
}

/* 2. In-Message Search Match Highlighting */
.mx_EventTile_searchHighlight {
  border-radius: 4px !important;
  padding: 1px 5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

body.theme-dark .mx_EventTile_searchHighlight,
body.cpd-theme-dark .mx_EventTile_searchHighlight,
body:not(.theme-light):not(.cpd-theme-light) .mx_EventTile_searchHighlight {
  background-color: rgba(16, 185, 129, 0.32) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.55) !important;
}

body.theme-light .mx_EventTile_searchHighlight,
body.cpd-theme-light .mx_EventTile_searchHighlight {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
}

.mx_EventTile_searchHighlight a {
  color: inherit !important;
  text-decoration: none !important;
}

/* 3. Modern User Mention Pills & @room Pills */
body.theme-dark .mx_UserPill_me,
body.cpd-theme-dark .mx_UserPill_me,
body.theme-dark .mx_AtRoomPill,
body.cpd-theme-dark .mx_AtRoomPill {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
}

body.theme-light .mx_UserPill_me,
body.cpd-theme-light .mx_UserPill_me,
body.theme-light .mx_AtRoomPill,
body.cpd-theme-light .mx_AtRoomPill {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border: 1px solid #10b981 !important;
}

/* 4. Spotlight Modal Styling: Maintained centrally in Section 17 */

/* 6. Room Search Auxiliary Summary Panel */
.mx_RoomSearchAuxPanel {
  min-height: 56px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  gap: 12px !important;
}

body.theme-dark .mx_RoomSearchAuxPanel,
body.cpd-theme-dark .mx_RoomSearchAuxPanel {
  background-color: #151619 !important;
  border-bottom: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_RoomSearchAuxPanel,
body.cpd-theme-light .mx_RoomSearchAuxPanel {
  background-color: #f8fafc !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

.mx_RoomSearchAuxPanel_summary b {
  color: #10b981 !important;
}

.mx_RoomSearchAuxPanel_buttons .cpd-link,
.mx_RoomSearchAuxPanel_buttons a {
  color: #10b981 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.mx_RoomSearchAuxPanel_buttons .cpd-link:hover,
.mx_RoomSearchAuxPanel_buttons a:hover {
  text-decoration: underline !important;
}

/* 7. Search Results Contextual Messages Readability */
body.theme-dark .mx_EventTile.mx_EventTile_contextual,
body.cpd-theme-dark .mx_EventTile.mx_EventTile_contextual {
  opacity: 0.65 !important;
}

/* ==========================================================================
   22. Profile Popover, Status Messages & Presence Indicators Contrast Polish
   ========================================================================== */

/* 1. User Profile Popover in Dark Mode */
body.cpd-theme-dark .mx_UserMenu_contextMenu,
body.theme-dark .mx_UserMenu_contextMenu,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserMenu_contextMenu {
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name,
body.theme-dark .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_name {
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_userId,
body.theme-dark .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_userId,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_userId {
  color: #94a3b8 !important;
}

body.cpd-theme-dark .mx_IconizedContextMenu_item,
body.theme-dark .mx_IconizedContextMenu_item,
body:not(.cpd-theme-light):not(.theme-light) .mx_IconizedContextMenu_item {
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_IconizedContextMenu_item:hover,
body.theme-dark .mx_IconizedContextMenu_item:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_IconizedContextMenu_item:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Sign Out button contrast */
body.cpd-theme-dark .mx_IconizedContextMenu_option_red,
body.theme-dark .mx_IconizedContextMenu_option_red,
body:not(.cpd-theme-light):not(.theme-light) .mx_IconizedContextMenu_option_red,
body.cpd-theme-dark .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon,
body.theme-dark .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon {
  color: #f87171 !important;
}

body.cpd-theme-light .mx_IconizedContextMenu_option_red,
body.theme-light .mx_IconizedContextMenu_option_red,
body.cpd-theme-light .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon,
body.theme-light .mx_IconizedContextMenu_option_red .mx_IconizedContextMenu_icon {
  color: #dc2626 !important;
}

/* 2. Timeline Status Messages & System Events */
body.cpd-theme-dark .mx_EventTile_info,
body.theme-dark .mx_EventTile_info,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile_info,
body.cpd-theme-dark .mx_GenericEventListSummary,
body.theme-dark .mx_GenericEventListSummary {
  color: #94a3b8 !important;
}

body.cpd-theme-light .mx_EventTile_info,
body.theme-light .mx_EventTile_info,
body.cpd-theme-light .mx_GenericEventListSummary,
body.theme-light .mx_GenericEventListSummary {
  color: #64748b !important;
}

/* Fix 50% opacity collapse on member info status messages */
.mx_UserInfo_statusMessage {
  opacity: 1 !important;
}
body.cpd-theme-dark .mx_UserInfo_statusMessage,
body.theme-dark .mx_UserInfo_statusMessage,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserInfo_statusMessage {
  color: #94a3b8 !important;
}
body.cpd-theme-light .mx_UserInfo_statusMessage,
body.theme-light .mx_UserInfo_statusMessage {
  color: #64748b !important;
}

/* 3. Notification Badges Contrast (WCAG AA Compliant) */
body.theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_notification,
body.cpd-theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_notification,
body:not(.cpd-theme-light):not(.theme-light) .mx_NotificationBadge.mx_NotificationBadge_level_notification,
body.theme-light .mx_NotificationBadge.mx_NotificationBadge_level_notification,
body.cpd-theme-light .mx_NotificationBadge.mx_NotificationBadge_level_notification {
  background-color: #047857 !important;
  color: #ffffff !important;
}

body.theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_highlight,
body.cpd-theme-dark .mx_NotificationBadge.mx_NotificationBadge_level_highlight,
body:not(.cpd-theme-light):not(.theme-light) .mx_NotificationBadge.mx_NotificationBadge_level_highlight,
body.theme-light .mx_NotificationBadge.mx_NotificationBadge_level_highlight,
body.cpd-theme-light .mx_NotificationBadge.mx_NotificationBadge_level_highlight {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

/* 4. Avatar Presence Dots (Light Theme Enhancements) */
body.cpd-theme-light .mx_WithPresenceIndicator_icon_online::before,
body.theme-light .mx_WithPresenceIndicator_icon_online::before,
body.cpd-theme-light .mx_DecoratedRoomAvatar_icon_online::before,
body.theme-light .mx_DecoratedRoomAvatar_icon_online::before {
  background-color: #059669 !important;
}

body.cpd-theme-light .mx_WithPresenceIndicator_icon_away::before,
body.theme-light .mx_WithPresenceIndicator_icon_away::before,
body.cpd-theme-light .mx_DecoratedRoomAvatar_icon_away::before,
body.theme-light .mx_DecoratedRoomAvatar_icon_away::before {
  background-color: #d97706 !important;
}

body.cpd-theme-light .mx_WithPresenceIndicator_icon_offline::before,
body.theme-light .mx_WithPresenceIndicator_icon_offline::before,
body.cpd-theme-light .mx_DecoratedRoomAvatar_icon_offline::before,
body.theme-light .mx_DecoratedRoomAvatar_icon_offline::before {
  background-color: #64748b !important;
}

/* ==========================================================================
   23. Call UI, Video/Audio Controls & Call Notifications Polish
   ========================================================================== */

/* Incoming Call Toasts & Dialogs */
.mx_IncomingCallToast,
.mx_CallToast {
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark .mx_IncomingCallToast,
body.cpd-theme-dark .mx_IncomingCallToast,
body.theme-dark .mx_CallToast,
body.cpd-theme-dark .mx_CallToast {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_IncomingCallToast,
body.cpd-theme-light .mx_IncomingCallToast,
body.theme-light .mx_CallToast,
body.cpd-theme-light .mx_CallToast {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

/* Call Accept & Decline Buttons */
.mx_IncomingCallToast .mx_AccessibleButton_kind_primary,
.mx_CallToast .mx_AccessibleButton_kind_primary {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.mx_IncomingCallToast .mx_AccessibleButton_kind_primary:hover,
.mx_CallToast .mx_AccessibleButton_kind_primary:hover {
  background-color: #059669 !important;
}

.mx_IncomingCallToast .mx_AccessibleButton_kind_danger,
.mx_CallToast .mx_AccessibleButton_kind_danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.mx_IncomingCallToast .mx_AccessibleButton_kind_danger:hover,
.mx_CallToast .mx_AccessibleButton_kind_danger:hover {
  background-color: #dc2626 !important;
}

/* Call View, Lobby & Video Surfaces */
body.theme-dark .mx_CallView,
body.cpd-theme-dark .mx_CallView,
body.theme-dark .mx_CallView_content,
body.cpd-theme-dark .mx_CallView_content {
  background-color: #111215 !important;
  color: #f4f4f5 !important;
}

body.theme-light .mx_CallView,
body.cpd-theme-light .mx_CallView,
body.theme-light .mx_CallView_content,
body.cpd-theme-light .mx_CallView_content {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Floating Picture-in-Picture Call Window */
.mx_WidgetPip {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark .mx_WidgetPip,
body.cpd-theme-dark .mx_WidgetPip {
  border: 1px solid #27272a !important;
  background-color: #18191c !important;
}

body.theme-light .mx_WidgetPip,
body.cpd-theme-light .mx_WidgetPip {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
}

/* Call Action Buttons in Call Controls */
.mx_CallView_buttons .mx_AccessibleButton_kind_primary,
.mx_CallView_buttons button.mx_CallView_button_screenshare[aria-pressed="true"] {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

.mx_CallView_buttons .mx_CallView_button_hangup {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}
.mx_CallView_buttons .mx_CallView_button_hangup:hover {
  background-color: #dc2626 !important;
}

/* Missed Call Banner in Message Timeline */
.mx_CallEvent_missed {
  border-left: 3px solid #ef4444 !important;
}

/* ==========================================================================
   24. Message Action Bar, Reactions Picker & Composer Reply Preview
   ========================================================================== */

/* Message Action Bar (Hover Toolbar on Event Tiles) */
body.cpd-theme-dark .mx_MessageActionBar,
body.theme-dark .mx_MessageActionBar,
body:not(.cpd-theme-light):not(.theme-light) .mx_MessageActionBar {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  padding: 2px 4px !important;
}

body.cpd-theme-dark .mx_MessageActionBar_iconButton,
body.theme-dark .mx_MessageActionBar_iconButton,
body:not(.cpd-theme-light):not(.theme-light) .mx_MessageActionBar_iconButton {
  color: #a1a1aa !important;
  border-radius: 6px !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

body.cpd-theme-dark .mx_MessageActionBar_iconButton:hover,
body.theme-dark .mx_MessageActionBar_iconButton:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_MessageActionBar_iconButton:hover,
body.cpd-theme-dark .mx_MessageActionBar_iconButton[aria-expanded="true"],
body.theme-dark .mx_MessageActionBar_iconButton[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.cpd-theme-dark .mx_MessageActionBar_mask,
body.theme-dark .mx_MessageActionBar_mask,
body:not(.cpd-theme-light):not(.theme-light) .mx_MessageActionBar_mask {
  background: linear-gradient(90deg, rgba(17, 18, 21, 0) 0%, #111215 100%) !important;
}

/* Reactions & Emoji Picker */
body.cpd-theme-dark .mx_EmojiPicker,
body.theme-dark .mx_EmojiPicker,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker,
body.cpd-theme-dark .mx_ReactionPicker,
body.theme-dark .mx_ReactionPicker,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReactionPicker {
  background-color: #18191c !important;
  border-color: #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_EmojiPicker_header,
body.theme-dark .mx_EmojiPicker_header,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_header,
body.cpd-theme-dark .mx_EmojiPicker_footer,
body.theme-dark .mx_EmojiPicker_footer,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_footer,
body.cpd-theme-dark .mx_EmojiPicker_category_title,
body.theme-dark .mx_EmojiPicker_category_title,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_category_title {
  background-color: #18191c !important;
  border-color: #27272a !important;
  color: #a1a1aa !important;
}

body.cpd-theme-dark .mx_EmojiPicker_item:hover,
body.theme-dark .mx_EmojiPicker_item:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_EmojiPicker_item:hover,
body.cpd-theme-dark .mx_ReactionPicker_item:hover,
body.theme-dark .mx_ReactionPicker_item:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReactionPicker_item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
}

/* Reply Preview (Composer Area & Reply Chain) */
body.cpd-theme-dark .mx_ReplyPreview,
body.theme-dark .mx_ReplyPreview,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyPreview {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-left: 3px solid #10b981 !important;
  border-radius: 8px 8px 0 0 !important;
  color: #a1a1aa !important;
  padding: 8px 12px !important;
}

body.cpd-theme-dark .mx_ReplyPreview_sender,
body.theme-dark .mx_ReplyPreview_sender,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyPreview_sender,
body.cpd-theme-dark .mx_ReplyPreview_header,
body.theme-dark .mx_ReplyPreview_header,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyPreview_header {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

body.cpd-theme-dark .mx_ReplyPreview_cancel,
body.theme-dark .mx_ReplyPreview_cancel,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyPreview_cancel {
  color: #a1a1aa !important;
  border-radius: 6px !important;
}

body.cpd-theme-dark .mx_ReplyPreview_cancel:hover,
body.theme-dark .mx_ReplyPreview_cancel:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyPreview_cancel:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Light Mode Section 24 Components */
body.cpd-theme-light .mx_MessageActionBar,
body.theme-light .mx_MessageActionBar {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-light .mx_MessageActionBar_iconButton,
body.theme-light .mx_MessageActionBar_iconButton {
  color: #64748b !important;
}

body.cpd-theme-light .mx_MessageActionBar_iconButton:hover,
body.theme-light .mx_MessageActionBar_iconButton:hover,
body.cpd-theme-light .mx_MessageActionBar_iconButton[aria-expanded="true"],
body.theme-light .mx_MessageActionBar_iconButton[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_MessageActionBar_mask,
body.theme-light .mx_MessageActionBar_mask {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%) !important;
}

body.cpd-theme-light .mx_EmojiPicker,
body.theme-light .mx_EmojiPicker,
body.cpd-theme-light .mx_ReactionPicker,
body.theme-light .mx_ReactionPicker {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

body.cpd-theme-light .mx_EmojiPicker_header,
body.theme-light .mx_EmojiPicker_header,
body.cpd-theme-light .mx_EmojiPicker_footer,
body.theme-light .mx_EmojiPicker_footer,
body.cpd-theme-light .mx_EmojiPicker_category_title,
body.theme-light .mx_EmojiPicker_category_title {
  background-color: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}

body.cpd-theme-light .mx_EmojiPicker_item:hover,
body.theme-light .mx_EmojiPicker_item:hover,
body.cpd-theme-light .mx_ReactionPicker_item:hover,
body.theme-light .mx_ReactionPicker_item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

body.cpd-theme-light .mx_ReplyPreview,
body.theme-light .mx_ReplyPreview {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-left: 3px solid #10b981 !important;
  color: #334155 !important;
}

body.cpd-theme-light .mx_ReplyPreview_sender,
body.theme-light .mx_ReplyPreview_sender,
body.cpd-theme-light .mx_ReplyPreview_header,
body.theme-light .mx_ReplyPreview_header {
  color: #0284c7 !important;
}

body.cpd-theme-light .mx_ReplyPreview_cancel,
body.theme-light .mx_ReplyPreview_cancel {
  color: #64748b !important;
}

body.cpd-theme-light .mx_ReplyPreview_cancel:hover,
body.theme-light .mx_ReplyPreview_cancel:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_ReplyChain,
body.theme-dark .mx_ReplyChain,
body:not(.cpd-theme-light):not(.theme-light) .mx_ReplyChain {
  background-color: transparent !important;
}


/* ==========================================================================
   25. Voice Messages, Audio Players, Image Lightbox & File Uploads Polish
   ========================================================================== */

/* 25.1 Voice Message Audio Player & Waveform Controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer,
.mx_MediaBody.mx_AudioPlayer_container {
  border-radius: 16px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.theme-dark .mx_MediaBody.mx_VoiceMessagePrimaryContainer,
body.cpd-theme-dark .mx_MediaBody.mx_VoiceMessagePrimaryContainer,
body:not(.cpd-theme-light):not(.theme-light) .mx_MediaBody.mx_VoiceMessagePrimaryContainer,
body.theme-dark .mx_MediaBody.mx_AudioPlayer_container,
body.cpd-theme-dark .mx_MediaBody.mx_AudioPlayer_container,
body:not(.cpd-theme-light):not(.theme-light) .mx_MediaBody.mx_AudioPlayer_container {
  background-color: #18191d !important;
  border: 1px solid #27272a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.theme-light .mx_MediaBody.mx_VoiceMessagePrimaryContainer,
body.cpd-theme-light .mx_MediaBody.mx_VoiceMessagePrimaryContainer,
body.theme-light .mx_MediaBody.mx_AudioPlayer_container,
body.cpd-theme-light .mx_MediaBody.mx_AudioPlayer_container {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MediaBody.mx_VoiceMessagePrimaryContainer,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MediaBody.mx_AudioPlayer_container {
  background-color: #152720 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.mx_PlayPauseButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mx_PlayPauseButton:hover {
  background-color: #059669 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
  transform: scale(1.06) !important;
}

.mx_PlayPauseButton:active {
  transform: scale(0.96) !important;
}

.mx_PlayPauseButton::before {
  background-color: #ffffff !important;
  width: 18px !important;
  height: 18px !important;
  top: 9px !important;
  left: 9px !important;
  mask-size: contain !important;
  mask-position: center !important;
}

.mx_Waveform {
  height: 30px !important;
  align-items: center !important;
  top: 0 !important;
}

.mx_Waveform .mx_Waveform_bar {
  border-radius: 9999px !important;
  min-width: 2px !important;
  margin-left: 1.5px !important;
  margin-right: 1.5px !important;
  transition: background-color 0.2s ease !important;
}

body.theme-dark .mx_Waveform .mx_Waveform_bar,
body.cpd-theme-dark .mx_Waveform .mx_Waveform_bar,
body:not(.cpd-theme-light):not(.theme-light) .mx_Waveform .mx_Waveform_bar {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

body.theme-dark .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct,
body.cpd-theme-dark .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct,
body:not(.cpd-theme-light):not(.theme-light) .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct {
  background-color: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important;
}

body.theme-light .mx_Waveform .mx_Waveform_bar,
body.cpd-theme-light .mx_Waveform .mx_Waveform_bar {
  background-color: rgba(15, 23, 42, 0.22) !important;
}

body.theme-light .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct,
body.cpd-theme-light .mx_Waveform .mx_Waveform_bar.mx_Waveform_bar_100pct {
  background-color: #059669 !important;
}

.mx_VoiceMessagePrimaryContainer .mx_Clock,
.mx_AudioPlayer_container .mx_Clock {
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

body.theme-dark .mx_VoiceMessagePrimaryContainer .mx_Clock,
body.cpd-theme-dark .mx_VoiceMessagePrimaryContainer .mx_Clock,
body:not(.cpd-theme-light):not(.theme-light) .mx_VoiceMessagePrimaryContainer .mx_Clock,
body.theme-dark .mx_AudioPlayer_container .mx_Clock,
body.cpd-theme-dark .mx_AudioPlayer_container .mx_Clock,
body:not(.cpd-theme-light):not(.theme-light) .mx_AudioPlayer_container .mx_Clock {
  color: #e4e4e7 !important;
}

body.theme-light .mx_VoiceMessagePrimaryContainer .mx_Clock,
body.cpd-theme-light .mx_VoiceMessagePrimaryContainer .mx_Clock,
body.theme-light .mx_AudioPlayer_container .mx_Clock,
body.cpd-theme-light .mx_AudioPlayer_container .mx_Clock {
  color: #334155 !important;
}

.mx_AudioPlayer_mediaName {
  font-weight: 600 !important;
  font-size: 14.5px !important;
}

body.theme-dark .mx_AudioPlayer_mediaName,
body.cpd-theme-dark .mx_AudioPlayer_mediaName,
body:not(.cpd-theme-light):not(.theme-light) .mx_AudioPlayer_mediaName {
  color: #f4f4f5 !important;
}

body.theme-dark .mx_AudioPlayer_byline,
body.cpd-theme-dark .mx_AudioPlayer_byline,
body:not(.cpd-theme-light):not(.theme-light) .mx_AudioPlayer_byline {
  color: #a1a1aa !important;
}

.mx_SeekBar {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 4px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  outline: none !important;
}

body.theme-light .mx_SeekBar,
body.cpd-theme-light .mx_SeekBar {
  background: rgba(0, 0, 0, 0.12) !important;
}

.mx_SeekBar::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
  cursor: pointer !important;
}

.mx_SeekBar::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6) !important;
  border: none !important;
  cursor: pointer !important;
}

.mx_SeekBar::before,
.mx_SeekBar::-moz-range-progress {
  background-color: #10b981 !important;
  height: 4px !important;
  border-radius: 9999px !important;
}

/* Voice message waveform timeline: position scrubber circle directly on the dotted waveform line */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle,
.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle,
.mx_RecordingPlayback_timelineLayoutMiddle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 30px !important;
}

.mx_RecordingPlayback_timelineLayoutMiddle .mx_Waveform {
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar,
.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar,
.mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 100% !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  -webkit-appearance: none !important;
}

.mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
  height: 12px !important;
}

.mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-track {
  background: transparent !important;
  border: none !important;
  height: 12px !important;
}

.mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::before,
.mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-progress,
.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::before,
.mx_MediaBody.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-progress,
.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::before,
.mx_VoiceMessagePrimaryContainer .mx_RecordingPlayback_timelineLayoutMiddle .mx_SeekBar::-moz-range-progress {
  display: none !important;
  background: transparent !important;
}

/* 25.2 Image Lightbox & Media Viewer Polish */
.mx_Dialog_wrapper:has(.mx_ImageView) {
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  background: rgba(5, 5, 8, 0.9) !important;
}

.mx_ImageView {
  user-select: none !important;
}

.mx_ImageView_panel {
  background: linear-gradient(180deg, rgba(10, 11, 14, 0.85) 0%, rgba(10, 11, 14, 0.5) 75%, transparent 100%) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  padding: 12px 24px !important;
  height: 72px !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
}

.mx_ImageView_info_sender {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}

.mx_ImageView_info a {
  color: #94a3b8 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
}

.mx_ImageView_info a:hover {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

.mx_ImageView_title {
  color: #e4e4e7 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}

.mx_ImageView_toolbar {
  gap: 10px !important;
}

.mx_ImageView_button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mx_ImageView_button:hover {
  background-color: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.mx_ImageView_button:active {
  transform: scale(0.96) !important;
}

.mx_ImageView_button::before {
  background-color: #ffffff !important;
  width: 20px !important;
  height: 20px !important;
}

.mx_ImageView_button_close {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.mx_ImageView_button_close:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
}

.mx_ImageView_button_close::before {
  background-color: #ffffff !important;
  width: 20px !important;
  height: 20px !important;
}

.mx_ImageView_image {
  border-radius: 4px !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7) !important;
}

/* 25.3 File Upload Previews, Progress Bar & Drop Targets */
.mx_UploadConfirmDialog_previewOuter {
  padding: 16px !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 16px !important;
}

body.theme-light .mx_UploadConfirmDialog_previewOuter,
body.cpd-theme-light .mx_UploadConfirmDialog_previewOuter {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.mx_UploadConfirmDialog_imagePreview {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  max-height: 280px !important;
}

.mx_UploadConfirmDialog_previewInner div[id^="mx-uploadconfirmdialog-"] {
  margin-top: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #f4f4f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body.theme-light .mx_UploadConfirmDialog_previewInner div[id^="mx-uploadconfirmdialog-"],
body.cpd-theme-light .mx_UploadConfirmDialog_previewInner div[id^="mx-uploadconfirmdialog-"] {
  color: #0f172a !important;
}

.mx_UploadConfirmDialog_fileIcon {
  color: #10b981 !important;
  stroke: #10b981 !important;
}

.mx_UploadBar {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  background-color: #18191c !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 1px solid #27272a !important;
}

body.theme-light .mx_UploadBar,
body.cpd-theme-light .mx_UploadBar {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.mx_UploadBar_filename {
  font-weight: 500 !important;
  font-size: 13.5px !important;
}

body.theme-dark .mx_UploadBar_filename,
body.cpd-theme-dark .mx_UploadBar_filename,
body:not(.cpd-theme-light):not(.theme-light) .mx_UploadBar_filename {
  color: #f4f4f5 !important;
}

body.theme-dark .mx_UploadBar_filename::before,
body.cpd-theme-dark .mx_UploadBar_filename::before,
body:not(.cpd-theme-light):not(.theme-light) .mx_UploadBar_filename::before {
  background-color: #10b981 !important;
}

body.theme-light .mx_UploadBar_filename,
body.cpd-theme-light .mx_UploadBar_filename {
  color: #0f172a !important;
}

body.theme-light .mx_UploadBar_filename::before,
body.cpd-theme-light .mx_UploadBar_filename::before {
  background-color: #059669 !important;
}

.mx_UploadBar_cancel {
  background-color: #a1a1aa !important;
  transition: all 0.15s ease !important;
}

.mx_UploadBar_cancel:hover {
  background-color: #ef4444 !important;
  transform: scale(1.15) !important;
}

progress.mx_ProgressBar {
  height: 6px !important;
  border-radius: 9999px !important;
  border: none !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

body.theme-light progress.mx_ProgressBar,
body.cpd-theme-light progress.mx_ProgressBar {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

progress.mx_ProgressBar::-webkit-progress-bar {
  background-color: transparent !important;
  border-radius: 9999px !important;
}

progress.mx_ProgressBar::-webkit-progress-value {
  background-color: #10b981 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
}

progress.mx_ProgressBar::-moz-progress-bar {
  background-color: #10b981 !important;
  border-radius: 9999px !important;
}

.mx_FileDropTarget {
  background: rgba(17, 18, 21, 0.92) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 2px dashed #10b981 !important;
  border-radius: 16px !important;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
  box-sizing: border-box !important;
}

.mx_FileDropTarget_image {
  width: 48px !important;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6)) !important;
}

/* 25.4 File Attachment Message Polish */
.mx_MFileBody,
.mx_EventTile_line .mx_MFileBody {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  vertical-align: middle !important;
}

.mx_MFileBody_info,
.mx_MFileBody .mx_MFileBody_info {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 40px !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 2px 0 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

/* File Attachment Bubble Themes & Subtle Borders */
body.theme-dark .mx_MFileBody_info,
body.cpd-theme-dark .mx_MFileBody_info,
body:not(.cpd-theme-light):not(.theme-light) .mx_MFileBody_info {
  background-color: #1e2025 !important;
  border: 1px solid #27272a !important;
}

body.theme-dark .mx_EventTile[data-self="true"] .mx_MFileBody_info,
body.cpd-theme-dark .mx_EventTile[data-self="true"] .mx_MFileBody_info,
body:not(.cpd-theme-light):not(.theme-light) .mx_EventTile[data-self="true"] .mx_MFileBody_info {
  background-color: #14322e !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

body.theme-light .mx_MFileBody_info,
body.cpd-theme-light .mx_MFileBody_info {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

body.theme-light .mx_EventTile[data-self="true"] .mx_MFileBody_info,
body.cpd-theme-light .mx_EventTile[data-self="true"] .mx_MFileBody_info {
  background-color: #ecfdf5 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* File Icon: Pure icon without background box or border wrapper */
.mx_MFileBody_info .mx_MFileBody_info_icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.mx_MFileBody_info .mx_MFileBody_info_icon::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  top: 0 !important;
  left: 0 !important;
  position: relative !important;
  background-color: #10b981 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* File name wrapper: prevent stretching so download icon is adjacent to filename */
.mx_MFileBody_info > span:not(.mx_MFileBody_info_icon):not(.mx_MFileBody_download_button) {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 260px !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_MFileBody_info .mx_MFileBody_info_filename {
  display: inline-block !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: 260px !important;
  flex: 0 1 auto !important;
  line-height: normal !important;
  font-size: 14px !important;
}

body.theme-dark .mx_MFileBody_info .mx_MFileBody_info_filename,
body.cpd-theme-dark .mx_MFileBody_info .mx_MFileBody_info_filename,
body:not(.cpd-theme-light):not(.theme-light) .mx_MFileBody_info .mx_MFileBody_info_filename {
  color: #f4f4f5 !important;
  font-weight: 500 !important;
}

body.theme-light .mx_MFileBody_info .mx_MFileBody_info_filename,
body.cpd-theme-light .mx_MFileBody_info .mx_MFileBody_info_filename {
  color: #0f172a !important;
  font-weight: 500 !important;
}

/* Download button icon inside the element, positioned right next to the filename */
.mx_MFileBody_info::after,
.mx_MFileBody_download_button {
  content: "" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: all 0.15s ease !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* If both DOM element and pseudo-element exist, prevent duplicate */
.mx_MFileBody_info:has(.mx_MFileBody_download_button)::after {
  display: none !important;
  content: none !important;
}

/* Dark mode download icon color */
body.theme-dark .mx_MFileBody_info::after,
body.cpd-theme-dark .mx_MFileBody_info::after,
body:not(.cpd-theme-light):not(.theme-light) .mx_MFileBody_info::after,
body.theme-dark .mx_MFileBody_download_button,
body.cpd-theme-dark .mx_MFileBody_download_button,
body:not(.cpd-theme-light):not(.theme-light) .mx_MFileBody_download_button {
  background-color: #94a3b8 !important;
}

body.theme-dark .mx_MFileBody_info:hover::after,
body.cpd-theme-dark .mx_MFileBody_info:hover::after,
body:not(.cpd-theme-light):not(.theme-light) .mx_MFileBody_info:hover::after,
body.theme-dark .mx_MFileBody_download_button:hover,
body.cpd-theme-dark .mx_MFileBody_download_button:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_MFileBody_download_button:hover {
  background-color: #10b981 !important;
  transform: scale(1.15) !important;
}

/* Light mode download icon color */
body.theme-light .mx_MFileBody_info::after,
body.cpd-theme-light .mx_MFileBody_info::after,
body.theme-light .mx_MFileBody_download_button,
body.cpd-theme-light .mx_MFileBody_download_button {
  background-color: #64748b !important;
}

body.theme-light .mx_MFileBody_info:hover::after,
body.cpd-theme-light .mx_MFileBody_info:hover::after,
body.theme-light .mx_MFileBody_download_button:hover,
body.cpd-theme-light .mx_MFileBody_download_button:hover {
  background-color: #10b981 !important;
  transform: scale(1.15) !important;
}

/* ==========================================================================
   26. RightPanel, Thread View, Member List & Room Summary Polish
   ========================================================================== */

/* 26.1 Main Container & Vertical Separator */
.mx_RightPanel {
  box-sizing: border-box !important;
}

body.cpd-theme-dark .mx_RightPanel,
body.theme-dark .mx_RightPanel,
body:not(.cpd-theme-light):not(.theme-light) .mx_RightPanel {
  background: #111215 !important;
  background-color: #111215 !important;
  border-left: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_RightPanel,
body.theme-light .mx_RightPanel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

/* 26.2 BaseCard & Header Polish (Matches .mx_RoomHeader) */
body.cpd-theme-dark .mx_BaseCard,
body.theme-dark .mx_BaseCard,
body:not(.cpd-theme-light):not(.theme-light) .mx_BaseCard {
  background: #111215 !important;
  background-color: #111215 !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_BaseCard,
body.theme-light .mx_BaseCard {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_BaseCard_header,
body.theme-dark .mx_BaseCard_header,
body:not(.cpd-theme-light):not(.theme-light) .mx_BaseCard_header {
  background: #111215 !important;
  background-color: #111215 !important;
  border-bottom: 1px solid #27272a !important;
  border-block-end: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_BaseCard_header,
body.theme-light .mx_BaseCard_header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-block-end: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-dark .mx_BaseCard_header_title_heading,
body.theme-dark .mx_BaseCard_header_title_heading,
body:not(.cpd-theme-light):not(.theme-light) .mx_BaseCard_header_title_heading,
body.cpd-theme-dark .mx_BaseCard_header > h2,
body.theme-dark .mx_BaseCard_header > h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_BaseCard_header_title_heading,
body.theme-light .mx_BaseCard_header_title_heading,
body.cpd-theme-light .mx_BaseCard_header > h2,
body.theme-light .mx_BaseCard_header > h2 {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* 26.3 Thread Panel & Thread View Polish */
body.cpd-theme-dark .mx_ThreadPanel,
body.theme-dark .mx_ThreadPanel,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThreadPanel,
body.cpd-theme-dark .mx_ThreadView,
body.theme-dark .mx_ThreadView,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThreadView,
body.cpd-theme-dark .mx_ThreadPanel .mx_AutoHideScrollbar,
body.theme-dark .mx_ThreadPanel .mx_AutoHideScrollbar,
body.cpd-theme-dark .mx_ThreadView_timelinePanelWrapper,
body.theme-dark .mx_ThreadView_timelinePanelWrapper {
  background: #111215 !important;
  background-color: #111215 !important;
}

body.cpd-theme-light .mx_ThreadPanel,
body.theme-light .mx_ThreadPanel,
body.cpd-theme-light .mx_ThreadView,
body.theme-light .mx_ThreadView,
body.cpd-theme-light .mx_ThreadPanel .mx_AutoHideScrollbar,
body.theme-light .mx_ThreadPanel .mx_AutoHideScrollbar,
body.cpd-theme-light .mx_ThreadView_timelinePanelWrapper,
body.theme-light .mx_ThreadView_timelinePanelWrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body.cpd-theme-dark .mx_ThreadPanel_vertical_separator {
  border-left: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_ThreadPanel_vertical_separator {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.cpd-theme-dark .mx_ThreadView .mx_MessageComposer {
  background: #111215 !important;
  border-top: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_ThreadView .mx_MessageComposer {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 26.4 Room Summary Card */
body.cpd-theme-dark .mx_RoomSummaryCard,
body.theme-dark .mx_RoomSummaryCard,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard {
  background: #111215 !important;
  background-color: #111215 !important;
}

body.cpd-theme-light .mx_RoomSummaryCard,
body.theme-light .mx_RoomSummaryCard {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body.cpd-theme-dark .mx_RoomSummaryCard hr,
body.theme-dark .mx_RoomSummaryCard hr,
body.cpd-theme-dark .mx_RoomSummaryCard [role="separator"],
body.theme-dark .mx_RoomSummaryCard [role="separator"],
body.cpd-theme-dark .mx_RoomSummaryCard [class*="_separator_"] {
  border-color: #27272a !important;
  background-color: #27272a !important;
  margin: 6px 0 !important;
}

body.cpd-theme-light .mx_RoomSummaryCard hr,
body.theme-light .mx_RoomSummaryCard hr,
body.cpd-theme-light .mx_RoomSummaryCard [role="separator"],
body.theme-light .mx_RoomSummaryCard [role="separator"],
body.cpd-theme-light .mx_RoomSummaryCard [class*="_separator_"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  margin: 6px 0 !important;
}

body.cpd-theme-dark .mx_RoomSummaryCard_roomName {
  color: #ffffff !important;
}

body.cpd-theme-light .mx_RoomSummaryCard_roomName {
  color: #0f172a !important;
}

/* Room Summary Card & Info Sheet Menu Items: Clean, unboxed dark/light theme (No green background) */
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitem"],
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitem"],
body.theme-dark .mx_RoomSummaryCard [role="menuitem"],
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitemcheckbox"],
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"],
body.theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"],
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [class*="_item_"],
body.cpd-theme-dark .mx_RoomSummaryCard [class*="_item_"],
body.theme-dark .mx_RoomSummaryCard [class*="_item_"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitem"],
body.cpd-theme-dark [role="menubar"] [role="menuitem"],
body.theme-dark [role="menubar"] [role="menuitem"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitemcheckbox"],
body.cpd-theme-dark [role="menubar"] [role="menuitemcheckbox"],
body.theme-dark [role="menubar"] [role="menuitemcheckbox"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [class*="_item_"],
body.cpd-theme-dark [role="menubar"] [class*="_item_"],
body.theme-dark [role="menubar"] [class*="_item_"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f4f4f5 !important;
  border-radius: 8px !important;
  margin: 1px 8px !important;
  width: calc(100% - 16px) !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitem"]:hover,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitem"]:hover,
body.theme-dark .mx_RoomSummaryCard [role="menuitem"]:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover,
body.theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [class*="_item_"]:hover,
body.cpd-theme-dark .mx_RoomSummaryCard [class*="_item_"]:hover,
body.theme-dark .mx_RoomSummaryCard [class*="_item_"]:hover,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitem"]:hover,
body.cpd-theme-dark [role="menubar"] [role="menuitem"]:hover,
body.theme-dark [role="menubar"] [role="menuitem"]:hover,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitemcheckbox"]:hover,
body.cpd-theme-dark [role="menubar"] [role="menuitemcheckbox"]:hover,
body.theme-dark [role="menubar"] [role="menuitemcheckbox"]:hover,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [class*="_item_"]:hover,
body.cpd-theme-dark [role="menubar"] [class*="_item_"]:hover,
body.theme-dark [role="menubar"] [class*="_item_"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitem"]:active,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitem"]:active,
body.theme-dark .mx_RoomSummaryCard [role="menuitem"]:active,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitemcheckbox"]:active,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"]:active,
body.theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"]:active,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [class*="_item_"]:active,
body.cpd-theme-dark .mx_RoomSummaryCard [class*="_item_"]:active,
body.theme-dark .mx_RoomSummaryCard [class*="_item_"]:active,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitem"]:active,
body.cpd-theme-dark [role="menubar"] [role="menuitem"]:active,
body.theme-dark [role="menubar"] [role="menuitem"]:active,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitemcheckbox"]:active,
body.cpd-theme-dark [role="menubar"] [role="menuitemcheckbox"]:active,
body.theme-dark [role="menubar"] [role="menuitemcheckbox"]:active,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [class*="_item_"]:active,
body.cpd-theme-dark [role="menubar"] [class*="_item_"]:active,
body.theme-dark [role="menubar"] [class*="_item_"]:active {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [role="menuitem"],
body.theme-light .mx_RoomSummaryCard [role="menuitem"],
body.cpd-theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"],
body.theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"],
body.cpd-theme-light .mx_RoomSummaryCard [class*="_item_"],
body.theme-light .mx_RoomSummaryCard [class*="_item_"],
body.cpd-theme-light [role="menubar"] [role="menuitem"],
body.theme-light [role="menubar"] [role="menuitem"],
body.cpd-theme-light [role="menubar"] [role="menuitemcheckbox"],
body.theme-light [role="menubar"] [role="menuitemcheckbox"],
body.cpd-theme-light [role="menubar"] [class*="_item_"],
body.theme-light [role="menubar"] [class*="_item_"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  margin: 1px 8px !important;
  width: calc(100% - 16px) !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [role="menuitem"]:hover,
body.theme-light .mx_RoomSummaryCard [role="menuitem"]:hover,
body.cpd-theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover,
body.theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover,
body.cpd-theme-light .mx_RoomSummaryCard [class*="_item_"]:hover,
body.theme-light .mx_RoomSummaryCard [class*="_item_"]:hover,
body.cpd-theme-light [role="menubar"] [role="menuitem"]:hover,
body.theme-light [role="menubar"] [role="menuitem"]:hover,
body.cpd-theme-light [role="menubar"] [role="menuitemcheckbox"]:hover,
body.theme-light [role="menubar"] [role="menuitemcheckbox"]:hover,
body.cpd-theme-light [role="menubar"] [class*="_item_"]:hover,
body.theme-light [role="menubar"] [class*="_item_"]:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  box-shadow: none !important;
  color: #09090b !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [role="menuitem"]:active,
body.theme-light .mx_RoomSummaryCard [role="menuitem"]:active,
body.cpd-theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"]:active,
body.theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"]:active,
body.cpd-theme-light .mx_RoomSummaryCard [class*="_item_"]:active,
body.theme-light .mx_RoomSummaryCard [class*="_item_"]:active,
body.cpd-theme-light [role="menubar"] [role="menuitem"]:active,
body.theme-light [role="menubar"] [role="menuitem"]:active,
body.cpd-theme-light [role="menubar"] [role="menuitemcheckbox"]:active,
body.theme-light [role="menubar"] [role="menuitemcheckbox"]:active,
body.cpd-theme-light [role="menubar"] [class*="_item_"]:active,
body.theme-light [role="menubar"] [class*="_item_"]:active {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Icons & Labels in Room Summary Card / Sheet */
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitem"] svg,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitem"] svg,
body.theme-dark .mx_RoomSummaryCard [role="menuitem"] svg,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitemcheckbox"] svg,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"] svg,
body.theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"] svg,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [class*="_icon_"],
body.cpd-theme-dark .mx_RoomSummaryCard [class*="_icon_"],
body.theme-dark .mx_RoomSummaryCard [class*="_icon_"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [class*="_icon_"],
body.cpd-theme-dark [role="menubar"] [class*="_icon_"],
body.theme-dark [role="menubar"] [class*="_icon_"] {
  color: #a1a1aa !important;
  stroke: none !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [role="menuitem"] svg,
body.theme-light .mx_RoomSummaryCard [role="menuitem"] svg,
body.cpd-theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"] svg,
body.theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"] svg,
body.cpd-theme-light .mx_RoomSummaryCard [class*="_icon_"],
body.theme-light .mx_RoomSummaryCard [class*="_icon_"],
body.cpd-theme-light [role="menubar"] [class*="_icon_"],
body.theme-light [role="menubar"] [class*="_icon_"] {
  color: #64748b !important;
  stroke: none !important;
}

body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitem"]:hover svg,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitem"]:hover svg,
body.theme-dark .mx_RoomSummaryCard [role="menuitem"]:hover svg,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover svg,
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover svg,
body.theme-dark .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover svg,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [role="menuitem"]:hover [class*="_icon_"],
body.cpd-theme-dark .mx_RoomSummaryCard [role="menuitem"]:hover [class*="_icon_"],
body.theme-dark .mx_RoomSummaryCard [role="menuitem"]:hover [class*="_icon_"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [role="menuitem"]:hover [class*="_icon_"],
body.cpd-theme-dark [role="menubar"] [role="menuitem"]:hover [class*="_icon_"],
body.theme-dark [role="menubar"] [role="menuitem"]:hover [class*="_icon_"] {
  color: #ffffff !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [role="menuitem"]:hover svg,
body.theme-light .mx_RoomSummaryCard [role="menuitem"]:hover svg,
body.cpd-theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover svg,
body.theme-light .mx_RoomSummaryCard [role="menuitemcheckbox"]:hover svg,
body.cpd-theme-light .mx_RoomSummaryCard [role="menuitem"]:hover [class*="_icon_"],
body.theme-light .mx_RoomSummaryCard [role="menuitem"]:hover [class*="_icon_"],
body.cpd-theme-light [role="menubar"] [role="menuitem"]:hover [class*="_icon_"],
body.theme-light [role="menubar"] [role="menuitem"]:hover [class*="_icon_"] {
  color: #0f172a !important;
}

/* Navigation Hint Arrow Chevron */
.mx_RoomSummaryCard [class*="_nav-hint_"],
[role="menubar"] [class*="_nav-hint_"] {
  color: #71717a !important;
}

/* Badge (e.g. pinned messages count) in Room Summary */
.mx_RoomSummaryCard [class*="_badge_"],
[role="menubar"] [class*="_badge_"] {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #a1a1aa !important;
  border-radius: 9999px !important;
  padding: 2px 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [class*="_badge_"],
body.theme-light .mx_RoomSummaryCard [class*="_badge_"],
body.cpd-theme-light [role="menubar"] [class*="_badge_"],
body.theme-light [role="menubar"] [class*="_badge_"] {
  background: rgba(0, 0, 0, 0.08) !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
}

/* Critical Action: Leave Room in Room Summary Card / Sheet */
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [data-kind="critical"],
body.cpd-theme-dark .mx_RoomSummaryCard [data-kind="critical"],
body.theme-dark .mx_RoomSummaryCard [data-kind="critical"],
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [data-kind="destructive"],
body.cpd-theme-dark .mx_RoomSummaryCard [data-kind="destructive"],
body.theme-dark .mx_RoomSummaryCard [data-kind="destructive"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [data-kind="critical"],
body.cpd-theme-dark [role="menubar"] [data-kind="critical"],
body.theme-dark [role="menubar"] [data-kind="critical"],
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [data-kind="destructive"],
body.cpd-theme-dark [role="menubar"] [data-kind="destructive"],
body.theme-dark [role="menubar"] [data-kind="destructive"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #f87171 !important;
}

body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [data-kind="critical"] svg,
body.cpd-theme-dark .mx_RoomSummaryCard [data-kind="critical"] svg,
body.theme-dark .mx_RoomSummaryCard [data-kind="critical"] svg,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [data-kind="destructive"] svg,
body.cpd-theme-dark .mx_RoomSummaryCard [data-kind="destructive"] svg,
body.theme-dark .mx_RoomSummaryCard [data-kind="destructive"] svg,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [data-kind="critical"] svg,
body.cpd-theme-dark [role="menubar"] [data-kind="critical"] svg,
body.theme-dark [role="menubar"] [data-kind="critical"] svg,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [data-kind="destructive"] svg,
body.cpd-theme-dark [role="menubar"] [data-kind="destructive"] svg,
body.theme-dark [role="menubar"] [data-kind="destructive"] svg {
  color: #f87171 !important;
}

body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [data-kind="critical"]:hover,
body.cpd-theme-dark .mx_RoomSummaryCard [data-kind="critical"]:hover,
body.theme-dark .mx_RoomSummaryCard [data-kind="critical"]:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomSummaryCard [data-kind="destructive"]:hover,
body.cpd-theme-dark .mx_RoomSummaryCard [data-kind="destructive"]:hover,
body.theme-dark .mx_RoomSummaryCard [data-kind="destructive"]:hover,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [data-kind="critical"]:hover,
body.cpd-theme-dark [role="menubar"] [data-kind="critical"]:hover,
body.theme-dark [role="menubar"] [data-kind="critical"]:hover,
body:not(.cpd-theme-light):not(.theme-light) [role="menubar"] [data-kind="destructive"]:hover,
body.cpd-theme-dark [role="menubar"] [data-kind="destructive"]:hover,
body.theme-dark [role="menubar"] [data-kind="destructive"]:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [data-kind="critical"],
body.theme-light .mx_RoomSummaryCard [data-kind="critical"],
body.cpd-theme-light .mx_RoomSummaryCard [data-kind="destructive"],
body.theme-light .mx_RoomSummaryCard [data-kind="destructive"],
body.cpd-theme-light [role="menubar"] [data-kind="critical"],
body.theme-light [role="menubar"] [data-kind="critical"],
body.cpd-theme-light [role="menubar"] [data-kind="destructive"],
body.theme-light [role="menubar"] [data-kind="destructive"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #ef4444 !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [data-kind="critical"] svg,
body.theme-light .mx_RoomSummaryCard [data-kind="critical"] svg,
body.cpd-theme-light .mx_RoomSummaryCard [data-kind="destructive"] svg,
body.theme-light .mx_RoomSummaryCard [data-kind="destructive"] svg,
body.cpd-theme-light [role="menubar"] [data-kind="critical"] svg,
body.theme-light [role="menubar"] [data-kind="critical"] svg,
body.cpd-theme-light [role="menubar"] [data-kind="destructive"] svg,
body.theme-light [role="menubar"] [data-kind="destructive"] svg {
  color: #ef4444 !important;
}

body.cpd-theme-light .mx_RoomSummaryCard [data-kind="critical"]:hover,
body.theme-light .mx_RoomSummaryCard [data-kind="critical"]:hover,
body.cpd-theme-light .mx_RoomSummaryCard [data-kind="destructive"]:hover,
body.theme-light .mx_RoomSummaryCard [data-kind="destructive"]:hover,
body.cpd-theme-light [role="menubar"] [data-kind="critical"]:hover,
body.theme-light [role="menubar"] [data-kind="critical"]:hover,
body.cpd-theme-light [role="menubar"] [data-kind="destructive"]:hover,
body.theme-light [role="menubar"] [data-kind="destructive"]:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

/* 26.5 Member List Rows & Hovers */
body.cpd-theme-dark .mx_MemberList,
body.theme-dark .mx_MemberList,
body:not(.cpd-theme-light):not(.theme-light) .mx_MemberList,
body.cpd-theme-dark .mx_MemberList_wrapper,
body.theme-dark .mx_MemberList_wrapper,
body.cpd-theme-dark .mx_MemberList_border,
body.theme-dark .mx_MemberList_border {
  background: #111215 !important;
  background-color: #111215 !important;
}

body.cpd-theme-light .mx_MemberList,
body.theme-light .mx_MemberList,
body.cpd-theme-light .mx_MemberList_wrapper,
body.theme-light .mx_MemberList_wrapper,
body.cpd-theme-light .mx_MemberList_border,
body.theme-light .mx_MemberList_border {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body.cpd-theme-dark .mx_MemberList h2,
body.theme-dark .mx_MemberList h2 {
  color: #94a3b8 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_MemberList h2,
body.theme-light .mx_MemberList h2 {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.mx_MemberList .mx_EntityTile {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 6px 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body.cpd-theme-dark .mx_MemberList .mx_EntityTile:hover,
body.theme-dark .mx_MemberList .mx_EntityTile:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_MemberList .mx_EntityTile:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

body.cpd-theme-light .mx_MemberList .mx_EntityTile:hover,
body.theme-light .mx_MemberList .mx_EntityTile:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

/* 26.6 User Info, Pinned Messages & Timeline Cards */
body.cpd-theme-dark .mx_UserInfo,
body.theme-dark .mx_UserInfo,
body.cpd-theme-dark .mx_PinnedMessagesCard,
body.theme-dark .mx_PinnedMessagesCard,
body.cpd-theme-dark .mx_TimelineCard,
body.theme-dark .mx_TimelineCard {
  background: #111215 !important;
  background-color: #111215 !important;
}

body.cpd-theme-light .mx_UserInfo,
body.theme-light .mx_UserInfo,
body.cpd-theme-light .mx_PinnedMessagesCard,
body.theme-light .mx_PinnedMessagesCard,
body.cpd-theme-light .mx_TimelineCard,
body.theme-light .mx_TimelineCard {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

body.cpd-theme-dark .mx_UserInfo_container + .mx_UserInfo_container {
  border-top: 1px solid #27272a !important;
}

body.cpd-theme-light .mx_UserInfo_container + .mx_UserInfo_container {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   27. Settings Dialog & Preferences Polish (Dark & Light)
   ========================================================================== */

/* 27.1 Universal Radio Buttons Clean Reset & Outlined Cards Polish */

/* Prevent native radio inputs from rendering visual artifacts, ghost rings or borders */
input[type="radio"] {
  outline: none !important;
  box-shadow: none !important;
}

.mx_StyledRadioButton input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Ensure ALL standard radio buttons (including Notifications tab grid and all inline radios) have NO wrapper borders or card backgrounds */
.mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *),
.mx_UserNotifSettings_grid .mx_StyledRadioButton,
body.cpd-theme-dark .mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *),
body.theme-dark .mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *),
body.cpd-theme-light .mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *),
body.theme-light .mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *),
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *) {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *):hover,
.mx_UserNotifSettings_grid .mx_StyledRadioButton:hover,
.mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *).mx_StyledRadioButton_checked,
.mx_StyledRadioButton:not(.mx_StyledRadioButton_outlined):not(.mx_CreateSecretStorageDialog_primaryContainer *):has(input:checked),
.mx_UserNotifSettings_grid .mx_StyledRadioButton.mx_StyledRadioButton_checked,
.mx_UserNotifSettings_grid .mx_StyledRadioButton:has(input:checked) {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Radio circle and dot styling across all themes */
.mx_StyledRadioButton input[type="radio"]+div {
  box-shadow: none !important;
  outline: none !important;
}

body.cpd-theme-light .mx_StyledRadioButton input[type="radio"]+div,
body.theme-light .mx_StyledRadioButton input[type="radio"]+div {
  background-color: transparent !important;
  border: 1.5px solid rgba(0, 0, 0, 0.35) !important;
}

body.cpd-theme-dark .mx_StyledRadioButton input[type="radio"]+div,
body.theme-dark .mx_StyledRadioButton input[type="radio"]+div,
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton input[type="radio"]+div {
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
}

body.cpd-theme-light .mx_StyledRadioButton input[type="radio"]:checked+div,
body.theme-light .mx_StyledRadioButton input[type="radio"]:checked+div,
body.cpd-theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div,
body.theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div,
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton input[type="radio"]:checked+div {
  border-color: #10b981 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

body.cpd-theme-light .mx_StyledRadioButton input[type="radio"]:checked+div>div,
body.theme-light .mx_StyledRadioButton input[type="radio"]:checked+div>div,
body.cpd-theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div>div,
body.theme-dark .mx_StyledRadioButton input[type="radio"]:checked+div>div,
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton input[type="radio"]:checked+div>div {
  background-color: #10b981 !important;
}

/* Outlined Radio Cards (applied only to components explicitly designed as outlined cards) */
body.cpd-theme-dark .mx_StyledRadioButton.mx_StyledRadioButton_outlined,
body.theme-dark .mx_StyledRadioButton.mx_StyledRadioButton_outlined,
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton.mx_StyledRadioButton_outlined {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 10px !important;
  color: #f4f4f5 !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-dark .mx_StyledRadioButton.mx_StyledRadioButton_outlined:hover,
body.theme-dark .mx_StyledRadioButton.mx_StyledRadioButton_outlined:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton.mx_StyledRadioButton_outlined:hover {
  border-color: rgba(16, 185, 129, 0.5) !important;
  background-color: #1f2125 !important;
}

body.cpd-theme-dark .mx_StyledRadioButton.mx_StyledRadioButton_outlined.mx_StyledRadioButton_checked,
body.theme-dark .mx_StyledRadioButton.mx_StyledRadioButton_outlined.mx_StyledRadioButton_checked,
body:not(.cpd-theme-light):not(.theme-light) .mx_StyledRadioButton.mx_StyledRadioButton_outlined.mx_StyledRadioButton_checked {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.08) !important;
}

body.cpd-theme-light .mx_StyledRadioButton.mx_StyledRadioButton_outlined,
body.theme-light .mx_StyledRadioButton.mx_StyledRadioButton_outlined {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  transition: all 0.15s ease !important;
}

body.cpd-theme-light .mx_StyledRadioButton.mx_StyledRadioButton_outlined:hover,
body.theme-light .mx_StyledRadioButton.mx_StyledRadioButton_outlined:hover {
  border-color: #10b981 !important;
  background-color: #f8fafc !important;
}

body.cpd-theme-light .mx_StyledRadioButton.mx_StyledRadioButton_outlined.mx_StyledRadioButton_checked,
body.theme-light .mx_StyledRadioButton.mx_StyledRadioButton_outlined.mx_StyledRadioButton_checked {
  border-color: #10b981 !important;
  background-color: rgba(16, 185, 129, 0.06) !important;
}

/* 27.2 Appearance Settings Cards & Grid Architecture */
.mx_AppearanceUserSettingsTab .mx_SettingsSection_subSections,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSection_subSections {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 0 !important;
}

/* Reduced vertical spacing between labels/headings and elements below in UI / theme settings tab */
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection,
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection.mx_SettingsSubsection_newUi,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection.mx_SettingsSubsection_newUi {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.mx_AppearanceUserSettingsTab .mx_SettingsSubsectionHeading,
.mx_AppearanceUserSettingsTab .mx_SettingsSubsectionHeading_heading,
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection_heading,
.mx_AppearanceUserSettingsTab .mx_SettingsTab_heading,
.mx_AppearanceUserSettingsTab h1,
.mx_AppearanceUserSettingsTab h2,
.mx_AppearanceUserSettingsTab h3,
.mx_AppearanceUserSettingsTab h4,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsectionHeading,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsectionHeading_heading,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection_heading,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsTab_heading,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) h1,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) h2,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) h3,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) h4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.3 !important;
}

.mx_AppearanceUserSettingsTab .mx_SettingsSubsection_content,
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection_content_newUi,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection_content,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection_content_newUi {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 10px !important;
}

.mx_AppearanceUserSettingsTab .mx_SettingsSubsection_description,
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection_text,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection_description,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection_text {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  line-height: 1.4 !important;
}

/* Reduced spacing for control labels and inputs inside UI tab */
.mx_AppearanceUserSettingsTab label,
.mx_AppearanceUserSettingsTab [data-radix-form-label],
.mx_AppearanceUserSettingsTab [class*="_label_"],
.mx_AppearanceUserSettingsTab .mx_Field label,
.mx_AppearanceUserSettingsTab .mx_Field_label,
.mx_AppearanceUserSettingsTab .mx_ThemeChoicePanel label,
.mx_AppearanceUserSettingsTab .mx_ThemeChoicePanel_CustomTheme label,
.mx_AppearanceUserSettingsTab .mx_ThemeChoicePanel_CustomTheme_EditInPlace label,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) label,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) [data-radix-form-label],
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) [class*="_label_"] {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]),
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) form:has([name="systemTheme"]),
form:has([name="systemTheme"]) {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  display: block !important;
  width: 100% !important;
}

form:has([name="systemTheme"]) [class*="_inline-field_"],
form:has([name="systemTheme"]) [class*="_inline-field"]:not([class*="-control"]):not([class*="-body"]),
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="_inline-field_"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="_inline-field"]:not([class*="-control"]):not([class*="-body"]),
.mx_SettingsTab form:has([name="systemTheme"]) [class*="_inline-field_"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="_inline-field"]:not([class*="-control"]):not([class*="-body"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

form:has([name="systemTheme"]) [class*="inline-field-control"],
form:has([name="systemTheme"]) [class*="-control"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="inline-field-control"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="-control"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="inline-field-control"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="-control"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

form:has([name="systemTheme"]) [class*="inline-field-body"],
form:has([name="systemTheme"]) [class*="-body"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="inline-field-body"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="-body"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="inline-field-body"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="-body"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

form:has([name="systemTheme"]) label,
form:has([name="systemTheme"]) [class*="_label"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) label,
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="_label"],
.mx_SettingsTab form:has([name="systemTheme"]) label,
.mx_SettingsTab form:has([name="systemTheme"]) [class*="_label"] {
  display: inline-block !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* 27.2.1 Theme Selection Grid */
.mx_ThemeChoicePanel_ThemeSelectors,
form.mx_ThemeChoicePanel_ThemeSelectors,
.mx_SettingsSubsection_content > form.mx_ThemeChoicePanel_ThemeSelectors,
.mx_SettingsTab .mx_ThemeChoicePanel_ThemeSelectors,
.mx_AppearanceUserSettingsTab .mx_ThemeChoicePanel_ThemeSelectors {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.mx_ThemeChoicePanel_themeSelector {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  margin: 0 !important;
}

.mx_ThemeChoicePanel_themeSelector [class*="inline-field-control"],
.mx_ThemeChoicePanel_themeSelector [class*="-control"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_ThemeChoicePanel_themeSelector [class*="inline-field-body"],
.mx_ThemeChoicePanel_themeSelector [class*="-body"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label,
.mx_ThemeChoicePanel_themeSelector label {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_disabled,
.mx_ThemeChoicePanel_themeSelector:has(input[disabled]) {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector,
body.theme-dark .mx_ThemeChoicePanel_themeSelector,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThemeChoicePanel_themeSelector {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector,
body.theme-light .mx_ThemeChoicePanel_themeSelector {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.mx_ThemeChoicePanel_themeSelector[aria-checked="true"],
.mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_selected,
.mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_enabled,
.mx_ThemeChoicePanel_themeSelector:has(input:checked) {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector:hover,
body.theme-dark .mx_ThemeChoicePanel_themeSelector:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThemeChoicePanel_themeSelector:hover {
  border-color: #10b981 !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector:hover,
body.theme-light .mx_ThemeChoicePanel_themeSelector:hover {
  border-color: #10b981 !important;
  background-color: #f1f5f9 !important;
}

/* In dark mode, ensure ALL theme selector labels, light-mode option titles, and text have crisp, high-contrast white text */
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector,
body.theme-dark .mx_ThemeChoicePanel_themeSelector,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThemeChoicePanel_themeSelector,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector *,
body.theme-dark .mx_ThemeChoicePanel_themeSelector *,
body:not(.cpd-theme-light):not(.theme-light) .mx_ThemeChoicePanel_themeSelector *,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector label,
body.theme-dark .mx_ThemeChoicePanel_themeSelector label,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector span,
body.theme-dark .mx_ThemeChoicePanel_themeSelector span,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label,
body.theme-dark .mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content,
body.theme-dark .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content *,
body.theme-dark .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content *,
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_spacer,
body.theme-dark .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_spacer {
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector [class*="description"],
body.theme-dark .mx_ThemeChoicePanel_themeSelector [class*="description"],
body.cpd-theme-dark .mx_ThemeChoicePanel_themeSelector [class*="sublabel"],
body.theme-dark .mx_ThemeChoicePanel_themeSelector [class*="sublabel"] {
  color: #a1a1aa !important;
}

/* In light mode, ensure crisp dark text across all options including dark mode choice */
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector,
body.theme-light .mx_ThemeChoicePanel_themeSelector,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector *,
body.theme-light .mx_ThemeChoicePanel_themeSelector *,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector label,
body.theme-light .mx_ThemeChoicePanel_themeSelector label,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector span,
body.theme-light .mx_ThemeChoicePanel_themeSelector span,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label,
body.theme-light .mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content,
body.theme-light .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content *,
body.theme-light .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_content *,
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_spacer,
body.theme-light .mx_ThemeChoicePanel_themeSelector .mx_StyledRadioButton_spacer,
body.cpd-theme-light .mx_ThemeChoicePanel label,
body.theme-light .mx_ThemeChoicePanel label,
body.cpd-theme-light [class*="_label_"],
body.theme-light [class*="_label_"],
body.cpd-theme-light [data-radix-form-label],
body.theme-light [data-radix-form-label],
body.cpd-theme-light [class*="_inline-field"] label,
body.theme-light [class*="_inline-field"] label,
body.cpd-theme-light .mx_ThemeChoicePanel_CustomTheme label,
body.theme-light .mx_ThemeChoicePanel_CustomTheme label,
body.cpd-theme-light .mx_ThemeChoicePanel_CustomThemeList_name,
body.theme-light .mx_ThemeChoicePanel_CustomThemeList_name,
body.cpd-theme-light .mx_ThemeChoicePanel_CustomThemeList_theme *,
body.theme-light .mx_ThemeChoicePanel_CustomThemeList_theme *,
body[class*="light"] .mx_ThemeChoicePanel label,
body[class*="light"] [class*="_label_"],
body[class*="light"] [data-radix-form-label],
body[class*="light"] [class*="_inline-field"] label,
body[class*="light"] .mx_ThemeChoicePanel_CustomTheme label,
body[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_name,
body[class*="light"] .mx_ThemeChoicePanel_CustomThemeList_theme * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector [class*="description"],
body.theme-light .mx_ThemeChoicePanel_themeSelector [class*="description"],
body.cpd-theme-light .mx_ThemeChoicePanel_themeSelector [class*="sublabel"],
body.theme-light .mx_ThemeChoicePanel_themeSelector [class*="sublabel"],
body.cpd-theme-light .mx_ThemeChoicePanel_CustomTheme p,
body.theme-light .mx_ThemeChoicePanel_CustomTheme p,
body[class*="light"] .mx_ThemeChoicePanel_CustomTheme p {
  color: #475569 !important;
}

/* 27.2.2 Message Layout Switcher */
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection:has(.mx_LayoutSwitcher_LayoutSelector) .mx_SettingsSubsection_content,
.mx_AppearanceUserSettingsTab .mx_SettingsSubsection:has(.mx_LayoutSwitcher_LayoutSelector) .mx_SettingsSubsection_content_newUi,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_SettingsSubsection:has(.mx_LayoutSwitcher_LayoutSelector) .mx_SettingsSubsection_content,
[data-testid="layoutPanel"] .mx_SettingsSubsection_content,
[data-testid="layoutPanel"] .mx_SettingsSubsection_content_newUi,
.mx_SettingsSubsection[data-testid="layoutPanel"] .mx_SettingsSubsection_content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

.mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_LayoutSelector,
.mx_SettingsTab:has(.mx_ThemeChoicePanel_ThemeSelectors) .mx_LayoutSwitcher_LayoutSelector,
[data-testid="layoutPanel"] .mx_LayoutSwitcher_LayoutSelector,
.mx_LayoutSwitcher_LayoutSelector {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mxLayoutSwitcher_LayoutSelector_LayoutRadio,
[data-testid="layoutPanel"] .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Compact layout toggle switch sits entirely on its own separate row below the cards */
form:has([name="compactLayout"]),
.mx_AppearanceUserSettingsTab form:has([name="compactLayout"]),
.mx_SettingsTab form:has([name="compactLayout"]),
[data-testid="layoutPanel"] form:has([name="compactLayout"]),
.mx_SettingsSubsection_content > form:has([name="compactLayout"]) {
  width: 100% !important;
  display: block !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  box-sizing: border-box !important;
  clear: both !important;
}

form:has([name="compactLayout"]) [class*="_inline-field_"],
form:has([name="compactLayout"]) [data-radix-form-field],
.mx_AppearanceUserSettingsTab form:has([name="compactLayout"]) [class*="_inline-field_"],
.mx_SettingsTab form:has([name="compactLayout"]) [class*="_inline-field_"],
[data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="_inline-field_"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Switch control on row 1 (native switch styles preserved) */
form:has([name="compactLayout"]) [class*="inline-field-control"],
.mx_AppearanceUserSettingsTab form:has([name="compactLayout"]) [class*="inline-field-control"],
.mx_SettingsTab form:has([name="compactLayout"]) [class*="inline-field-control"],
[data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="inline-field-control"] {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

form:has([name="compactLayout"]) [class*="_container_"] {
  width: 2.25rem !important;
  inline-size: 2.25rem !important;
  height: 1.25rem !important;
  block-size: 1.25rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Body container unwrapped so label and help-message become flex items */
form:has([name="compactLayout"]) [class*="inline-field-body"],
.mx_AppearanceUserSettingsTab form:has([name="compactLayout"]) [class*="inline-field-body"],
.mx_SettingsTab form:has([name="compactLayout"]) [class*="inline-field-body"],
[data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="inline-field-body"] {
  display: contents !important;
}

/* Label on row 1 next to switch */
form:has([name="compactLayout"]) label,
form:has([name="compactLayout"]) [class*="_label"],
.mx_AppearanceUserSettingsTab form:has([name="compactLayout"]) label,
.mx_SettingsTab form:has([name="compactLayout"]) label,
[data-testid="layoutPanel"] form:has([name="compactLayout"]) label {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Description on row 2 below switch and label */
form:has([name="compactLayout"]) [class*="help-message"],
form:has([name="compactLayout"]) [class*="_message_"],
form:has([name="compactLayout"]) [data-radix-form-message],
.mx_AppearanceUserSettingsTab form:has([name="compactLayout"]) [class*="help-message"],
.mx_SettingsTab form:has([name="compactLayout"]) [class*="help-message"],
[data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="help-message"] {
  order: 3 !important;
  display: block !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
}

body.cpd-theme-dark form:has([name="compactLayout"]) [class*="help-message"],
body.cpd-theme-dark form:has([name="compactLayout"]) [class*="_message_"],
body.cpd-theme-dark form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body.theme-dark form:has([name="compactLayout"]) [class*="help-message"],
body.theme-dark form:has([name="compactLayout"]) [class*="_message_"],
body.theme-dark form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body:not(.cpd-theme-light):not(.theme-light) form:has([name="compactLayout"]) [class*="help-message"],
body:not(.cpd-theme-light):not(.theme-light) form:has([name="compactLayout"]) [class*="_message_"],
body:not(.cpd-theme-light):not(.theme-light) form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body.cpd-theme-dark [data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="help-message"],
body.theme-dark [data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="help-message"],
body.cpd-theme-dark [data-testid="layoutPanel"] form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body.theme-dark [data-testid="layoutPanel"] form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body:not(.cpd-theme-light):not(.theme-light) [data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="help-message"],
body:not(.cpd-theme-light):not(.theme-light) [data-testid="layoutPanel"] form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball) {
  color: #a1a1aa !important;
}

body.cpd-theme-light form:has([name="compactLayout"]) [class*="help-message"],
body.cpd-theme-light form:has([name="compactLayout"]) [class*="_message_"],
body.cpd-theme-light form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body.theme-light form:has([name="compactLayout"]) [class*="help-message"],
body.theme-light form:has([name="compactLayout"]) [class*="_message_"],
body.theme-light form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body.cpd-theme-light [data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="help-message"],
body.theme-light [data-testid="layoutPanel"] form:has([name="compactLayout"]) [class*="help-message"],
body.cpd-theme-light [data-testid="layoutPanel"] form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball),
body.theme-light [data-testid="layoutPanel"] form:has([name="compactLayout"]) span:not(.mx_ToggleSwitch_ball) {
  color: #64748b !important;
}

/* System Theme Toggle: switch and label on the same row next to each other */
form:has([name="systemTheme"]),
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]),
.mx_SettingsTab form:has([name="systemTheme"]),
.mx_SettingsSubsection_content > form:has([name="systemTheme"]) {
  width: 100% !important;
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}

form:has([name="systemTheme"]) > div,
form:has([name="systemTheme"]) [class*="_inline-field_"],
form:has([name="systemTheme"]) [class*="_inline-field"]:not([class*="-control"]):not([class*="-body"]),
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="_inline-field"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="_inline-field_"],
.mx_SettingsTab form:has([name="systemTheme"]) > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

form:has([name="systemTheme"]) [class*="inline-field-control"],
form:has([name="systemTheme"]) [class*="-control"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="inline-field-control"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="inline-field-control"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

form:has([name="systemTheme"]) [class*="_container_"] {
  width: 2.25rem !important;
  inline-size: 2.25rem !important;
  height: 1.25rem !important;
  block-size: 1.25rem !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

form:has([name="systemTheme"]) [class*="inline-field-body"],
form:has([name="systemTheme"]) [class*="-body"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) [class*="inline-field-body"],
.mx_SettingsTab form:has([name="systemTheme"]) [class*="inline-field-body"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

form:has([name="systemTheme"]) label,
form:has([name="systemTheme"]) [class*="_label"],
.mx_AppearanceUserSettingsTab form:has([name="systemTheme"]) label,
.mx_SettingsTab form:has([name="systemTheme"]) label {
  display: inline-block !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
}

body.cpd-theme-dark form:has([name="systemTheme"]) label,
body.cpd-theme-dark form:has([name="systemTheme"]) [class*="_label_"],
body.theme-dark form:has([name="systemTheme"]) label,
body.theme-dark form:has([name="systemTheme"]) [class*="_label_"],
body:not(.cpd-theme-light):not(.theme-light) form:has([name="systemTheme"]) label,
body:not(.cpd-theme-light):not(.theme-light) form:has([name="systemTheme"]) [class*="_label_"] {
  color: #f4f4f5 !important;
}

body.cpd-theme-light form:has([name="systemTheme"]) label,
body.cpd-theme-light form:has([name="systemTheme"]) [class*="_label_"],
body.theme-light form:has([name="systemTheme"]) label,
body.theme-light form:has([name="systemTheme"]) [class*="_label_"] {
  color: #0f172a !important;
}

.mxLayoutSwitcher_LayoutSelector_LayoutRadio {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio,
body.theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio,
body:not(.cpd-theme-light):not(.theme-light) .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio,
body.theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.mxLayoutSwitcher_LayoutSelector_LayoutRadio:has(input:checked),
.mxLayoutSwitcher_LayoutSelector_LayoutRadio[aria-checked="true"] {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

body.cpd-theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio:hover,
body.theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio:hover,
body:not(.cpd-theme-light):not(.theme-light) .mxLayoutSwitcher_LayoutSelector_LayoutRadio:hover {
  border-color: #10b981 !important;
}

body.cpd-theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio:hover,
body.theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio:hover {
  border-color: #10b981 !important;
  background-color: #f1f5f9 !important;
}

.mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
  padding: 10px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}

.mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
  margin: 0 !important;
  border: none !important;
}

body.cpd-theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator,
body.theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator,
body:not(.cpd-theme-light):not(.theme-light) .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
  border-top: 1px solid #27272a !important;
}

body.cpd-theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator,
body.theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
  border-top: 1px solid #e2e8f0 !important;
}

.mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  min-height: 60px !important;
}

body.cpd-theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview,
body.theme-dark .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview,
body:not(.cpd-theme-light):not(.theme-light) .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
  background-color: #111215 !important;
}

body.cpd-theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview,
body.theme-light .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
  background-color: #ffffff !important;
}

/* 27.2.3 Font Scaling Dropdown & Preview */
.mx_FontScalingPanel_Dropdown {
  width: 240px !important;
  min-width: 200px !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  margin: 0 0 8px 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-dark .mx_FontScalingPanel_Dropdown,
body.theme-dark .mx_FontScalingPanel_Dropdown,
body:not(.cpd-theme-light):not(.theme-light) .mx_FontScalingPanel_Dropdown {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_FontScalingPanel_Dropdown,
body.theme-light .mx_FontScalingPanel_Dropdown {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.mx_FontScalingPanel_Dropdown:hover,
.mx_FontScalingPanel_Dropdown:focus-within {
  border-color: #10b981 !important;
}

body.cpd-theme-dark .mx_FontScalingPanel_Dropdown:focus-within,
body.theme-dark .mx_FontScalingPanel_Dropdown:focus-within,
body:not(.cpd-theme-light):not(.theme-light) .mx_FontScalingPanel_Dropdown:focus-within {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

body.cpd-theme-light .mx_FontScalingPanel_Dropdown:focus-within,
body.theme-light .mx_FontScalingPanel_Dropdown:focus-within {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Hide overlapping internal label in font size dropdown (heading already labels it) */
.mx_FontScalingPanel_Dropdown label {
  display: none !important;
}

.mx_FontScalingPanel_Dropdown select {
  width: 100% !important;
  height: 100% !important;
  min-height: 42px !important;
  padding: 0 38px 0 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.cpd-theme-dark .mx_FontScalingPanel_Dropdown select,
body.theme-dark .mx_FontScalingPanel_Dropdown select,
body:not(.cpd-theme-light):not(.theme-light) .mx_FontScalingPanel_Dropdown select {
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_FontScalingPanel_Dropdown select,
body.theme-light .mx_FontScalingPanel_Dropdown select {
  color: #0f172a !important;
}

.mx_FontScalingPanel_Dropdown select option {
  padding: 8px 12px !important;
  font-size: 14px !important;
}

body.cpd-theme-dark .mx_FontScalingPanel_Dropdown select option,
body.theme-dark .mx_FontScalingPanel_Dropdown select option,
body:not(.cpd-theme-light):not(.theme-light) .mx_FontScalingPanel_Dropdown select option {
  background-color: #18191c !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_FontScalingPanel_Dropdown select option,
body.theme-light .mx_FontScalingPanel_Dropdown select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.mx_FontScalingPanel_Dropdown::after {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 15.375l-6-6l1.4-1.4l4.6 4.6l4.6-4.6l1.4 1.4z'/%3E%3C/svg%3E") no-repeat center center / 18px 18px !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 15.375l-6-6l1.4-1.4l4.6 4.6l4.6-4.6l1.4 1.4z'/%3E%3C/svg%3E") no-repeat center center / 18px 18px !important;
}

body.cpd-theme-dark .mx_FontScalingPanel_Dropdown::after,
body.theme-dark .mx_FontScalingPanel_Dropdown::after,
body:not(.cpd-theme-light):not(.theme-light) .mx_FontScalingPanel_Dropdown::after {
  background-color: #a1a1aa !important;
}

body.cpd-theme-light .mx_FontScalingPanel_Dropdown::after,
body.theme-light .mx_FontScalingPanel_Dropdown::after {
  background-color: #64748b !important;
}

.mx_FontScalingPanel_preview {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-top: 0 !important;
}

body.cpd-theme-dark .mx_FontScalingPanel_preview,
body.theme-dark .mx_FontScalingPanel_preview,
body:not(.cpd-theme-light):not(.theme-light) .mx_FontScalingPanel_preview {
  background-color: #111215 !important;
  border: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_FontScalingPanel_preview,
body.theme-light .mx_FontScalingPanel_preview {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* 27.2.4 Image Size Panel */
.mx_ImageSizePanel_radios {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mx_ImageSizePanel_radios > label {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 14px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

body.cpd-theme-dark .mx_ImageSizePanel_radios > label,
body.theme-dark .mx_ImageSizePanel_radios > label,
body:not(.cpd-theme-light):not(.theme-light) .mx_ImageSizePanel_radios > label {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_ImageSizePanel_radios > label,
body.theme-light .mx_ImageSizePanel_radios > label {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.mx_ImageSizePanel_radios > label:has(input:checked) {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

body.cpd-theme-dark .mx_ImageSizePanel_radios > label:hover,
body.theme-dark .mx_ImageSizePanel_radios > label:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_ImageSizePanel_radios > label:hover {
  border-color: #10b981 !important;
}

body.cpd-theme-light .mx_ImageSizePanel_radios > label:hover,
body.theme-light .mx_ImageSizePanel_radios > label:hover {
  border-color: #10b981 !important;
  background-color: #f1f5f9 !important;
}

.mx_ImageSizePanel_size {
  width: 100% !important;
  max-width: 200px !important;
  height: 100px !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  margin-bottom: 6px !important;
}

body.cpd-theme-dark .mx_ImageSizePanel_size,
body.theme-dark .mx_ImageSizePanel_size,
body:not(.cpd-theme-light):not(.theme-light) .mx_ImageSizePanel_size {
  background-color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_ImageSizePanel_size,
body.theme-light .mx_ImageSizePanel_size {
  background-color: #0f172a !important;
}

/* 27.2.5 Suppress Custom System Font Settings Entirely */
.mx_AppearanceUserSettingsTab_checkboxControlledField,
.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField,
.mx_AppearanceUserSettingsTab .mx_Checkbox:has(+ .mx_AppearanceUserSettingsTab_checkboxControlledField),
.mx_Checkbox:has(+ .mx_AppearanceUserSettingsTab_checkboxControlledField),
.mx_AppearanceUserSettingsTab .mx_Checkbox:has(input[id*="useSystemFont"]),
.mx_AppearanceUserSettingsTab .mx_SettingsFlag:has(input[id*="useSystemFont"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

body.cpd-theme-dark .mx_AppearanceUserSettingsTab textarea,
body.theme-dark .mx_AppearanceUserSettingsTab textarea,
body:not(.cpd-theme-light):not(.theme-light) .mx_AppearanceUserSettingsTab textarea {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
  color: #f4f4f5 !important;
  border-radius: 10px !important;
}

body.cpd-theme-light .mx_AppearanceUserSettingsTab textarea,
body.theme-light .mx_AppearanceUserSettingsTab textarea {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
}

/* 27.3 Sessions & Device Management (Polished Spacing, Clean Cards & Aligned Metadata) */

/* Device Tile (Session Item) */
.mx_DeviceTile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

body.cpd-theme-light .mx_DeviceTile,
body.theme-light .mx_DeviceTile,
body[class*="light"] .mx_DeviceTile,
html[class*="light"] .mx_DeviceTile {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

body.cpd-theme-dark .mx_DeviceTile,
body.theme-dark .mx_DeviceTile,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  color: #f4f4f5 !important;
}

.mx_DeviceTile:hover {
  border-color: #cbd5e1 !important;
}

body.cpd-theme-dark .mx_DeviceTile:hover,
body.theme-dark .mx_DeviceTile:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile:hover {
  border-color: #3f3f46 !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.mx_DeviceTypeIcon {
  flex: 0 0 auto !important;
  margin-right: 12px !important;
  position: relative !important;
}

.mx_DeviceTypeIcon_deviceIconWrapper {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

body.cpd-theme-light .mx_DeviceTypeIcon_deviceIconWrapper,
body.theme-light .mx_DeviceTypeIcon_deviceIconWrapper {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: none !important;
}

body.cpd-theme-dark .mx_DeviceTypeIcon_deviceIconWrapper,
body.theme-dark .mx_DeviceTypeIcon_deviceIconWrapper,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTypeIcon_deviceIconWrapper {
  background-color: #27272a !important;
  color: #a1a1aa !important;
  border: none !important;
}

.mx_DeviceTypeIcon_verificationIcon {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 2px !important;
}

body.cpd-theme-light .mx_DeviceTypeIcon_verificationIcon,
body.theme-light .mx_DeviceTypeIcon_verificationIcon {
  background-color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
}

body.cpd-theme-dark .mx_DeviceTypeIcon_verificationIcon,
body.theme-dark .mx_DeviceTypeIcon_verificationIcon,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTypeIcon_verificationIcon {
  background-color: #18191c !important;
  border: 1.5px solid #18191c !important;
}

.mx_DeviceTile_info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}

.mx_DeviceTile_info [class*="Heading"],
.mx_DeviceTile_info h4,
.mx_DeviceTile_info span:first-child {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

body.cpd-theme-dark .mx_DeviceTile_info [class*="Heading"],
body.cpd-theme-dark .mx_DeviceTile_info h4,
body.cpd-theme-dark .mx_DeviceTile_info span:first-child,
body.theme-dark .mx_DeviceTile_info [class*="Heading"],
body.theme-dark .mx_DeviceTile_info h4,
body.theme-dark .mx_DeviceTile_info span:first-child,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile_info [class*="Heading"],
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile_info h4,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile_info span:first-child {
  color: #f4f4f5 !important;
}

.mx_DeviceTile_metadata {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  margin: 0 !important;
}

body.cpd-theme-dark .mx_DeviceTile_metadata,
body.theme-dark .mx_DeviceTile_metadata,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceTile_metadata {
  color: #94a3b8 !important;
}

.mx_DeviceTile_actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 12px !important;
}

.mx_DeviceExpandDetailsButton {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.mx_DeviceExpandDetailsButton:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_DeviceExpandDetailsButton:hover,
body.theme-dark .mx_DeviceExpandDetailsButton:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceExpandDetailsButton:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Device Details Card (Expanded Session View) */
.mx_DeviceDetails,
.mx_CurrentDeviceSection_deviceDetails,
.mx_FilteredDeviceList_deviceDetails {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-top: 8px !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}

body.cpd-theme-light .mx_DeviceDetails,
body.theme-light .mx_DeviceDetails,
body[class*="light"] .mx_DeviceDetails,
html[class*="light"] .mx_DeviceDetails {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.cpd-theme-dark .mx_DeviceDetails,
body.theme-dark .mx_DeviceDetails,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails {
  background-color: #18191c !important;
  border: 1.5px solid #27272a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Sections inside DeviceDetails */
.mx_DeviceDetails_section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 16px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  width: 100% !important;
}

body.cpd-theme-dark .mx_DeviceDetails_section,
body.theme-dark .mx_DeviceDetails_section,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_section {
  border-bottom: 1px solid #27272a !important;
}

.mx_DeviceDetails_section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Device Detail Heading & Rename Action */
.mx_DeviceDetailHeading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mx_DeviceDetailHeading h3,
.mx_DeviceDetailHeading [class*="Heading"] {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

body.cpd-theme-dark .mx_DeviceDetailHeading h3,
body.cpd-theme-dark .mx_DeviceDetailHeading [class*="Heading"],
body.theme-dark .mx_DeviceDetailHeading h3,
body.theme-dark .mx_DeviceDetailHeading [class*="Heading"],
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetailHeading h3,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetailHeading [class*="Heading"] {
  color: #f4f4f5 !important;
}

.mx_DeviceDetailHeading_renameCta {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #10b981 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.mx_DeviceDetailHeading_renameCta:hover {
  background-color: rgba(16, 185, 129, 0.08) !important;
  text-decoration: underline !important;
}

.mx_DeviceDetailHeading_renameForm {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.mx_DeviceDetailHeading_renameFormButtons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

/* Security Status Alert Card inside DeviceDetails */
.mx_DeviceSecurityCard {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

body.cpd-theme-light .mx_DeviceSecurityCard,
body.theme-light .mx_DeviceSecurityCard,
body[class*="light"] .mx_DeviceSecurityCard,
html[class*="light"] .mx_DeviceSecurityCard {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

body.cpd-theme-dark .mx_DeviceSecurityCard,
body.theme-dark .mx_DeviceSecurityCard,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceSecurityCard {
  background-color: #141518 !important;
  border: 1px solid #27272a !important;
}

.mx_DeviceSecurityCard_icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.mx_DeviceSecurityCard_icon.Unverified,
.mx_DeviceSecurityCard_icon.Unverifiable {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

.mx_DeviceSecurityCard_icon.Verified {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
}

.mx_DeviceSecurityCard_icon.Inactive {
  background-color: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
}

.mx_DeviceSecurityCard_content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mx_DeviceSecurityCard_heading {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_DeviceSecurityCard_heading,
body.theme-dark .mx_DeviceSecurityCard_heading,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceSecurityCard_heading {
  color: #f4f4f5 !important;
}

.mx_DeviceSecurityCard_description {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  margin: 0 !important;
}

body.cpd-theme-dark .mx_DeviceSecurityCard_description,
body.theme-dark .mx_DeviceSecurityCard_description,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceSecurityCard_description {
  color: #94a3b8 !important;
}

.mx_DeviceSecurityCard_actions {
  margin-top: 12px !important;
}

.mx_DeviceSecurityCard_actions button,
.mx_DeviceSecurityCard_actions .mx_AccessibleButton {
  min-height: 36px !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Device Metadata Information Section & Tables */
.mx_DeviceDetails_sectionHeading {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

body.cpd-theme-dark .mx_DeviceDetails_sectionHeading,
body.theme-dark .mx_DeviceDetails_sectionHeading,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_sectionHeading {
  color: #94a3b8 !important;
}

.mx_DeviceDetails_metadataTable {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.cpd-theme-light .mx_DeviceDetails_metadataTable,
body.theme-light .mx_DeviceDetails_metadataTable,
body[class*="light"] .mx_DeviceDetails_metadataTable,
html[class*="light"] .mx_DeviceDetails_metadataTable {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.cpd-theme-dark .mx_DeviceDetails_metadataTable,
body.theme-dark .mx_DeviceDetails_metadataTable,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_metadataTable {
  background-color: #141518 !important;
  border: 1px solid #27272a !important;
}

.mx_DeviceDetails_metadataTable thead {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  padding: 0 0 6px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.cpd-theme-dark .mx_DeviceDetails_metadataTable thead,
body.theme-dark .mx_DeviceDetails_metadataTable thead,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_metadataTable thead {
  border-bottom: 1px solid #27272a !important;
}

.mx_DeviceDetails_metadataTable thead tr {
  display: block !important;
  width: 100% !important;
}

.mx_DeviceDetails_metadataTable thead th {
  display: block !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

body.cpd-theme-dark .mx_DeviceDetails_metadataTable thead th,
body.theme-dark .mx_DeviceDetails_metadataTable thead th,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_metadataTable thead th {
  color: #94a3b8 !important;
}

.mx_DeviceDetails_metadataTable tbody {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 8px !important;
}

.mx_DeviceDetails_metadataTable tbody tr {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  width: 100% !important;
  padding: 1px 0 !important;
  border: none !important;
  margin: 0 !important;
}

.mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  flex: 0 0 auto !important;
  min-width: 140px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

body.cpd-theme-dark .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel,
body.theme-dark .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataLabel {
  color: #94a3b8 !important;
}

.mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  flex: 1 1 auto !important;
  text-align: right !important;
  word-break: break-all !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}

body.cpd-theme-dark .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue,
body.theme-dark .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_DeviceDetails_metadataTable .mxDeviceDetails_metadataValue {
  color: #f4f4f5 !important;
}

/* Sign Out Danger Button inside DeviceDetails */
.mx_DeviceDetails .mx_AccessibleButton_kind_danger_inline,
.mx_DeviceDetails button.mx_AccessibleButton_kind_danger_inline {
  color: #ef4444 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  min-height: 34px !important;
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.mx_DeviceDetails .mx_AccessibleButton_kind_danger_inline:hover,
.mx_DeviceDetails button.mx_AccessibleButton_kind_danger_inline:hover {
  background-color: rgba(239, 68, 68, 0.08) !important;
  border-color: #ef4444 !important;
}

.mx_DeviceDetails_signOutButtonContent {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Push Notifications Toggle Section */
.mx_DeviceDetails_pushNotifications {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.mx_DeviceDetails_pushNotifications .mx_ToggleSwitch {
  margin: 0 !important;
  float: none !important;
}

/* Other Sessions Filter Header & Device List */
.mx_FilteredDeviceListHeader {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

body.cpd-theme-light .mx_FilteredDeviceListHeader,
body.theme-light .mx_FilteredDeviceListHeader,
body[class*="light"] .mx_FilteredDeviceListHeader,
html[class*="light"] .mx_FilteredDeviceListHeader {
  background-color: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
}

body.cpd-theme-dark .mx_FilteredDeviceListHeader,
body.theme-dark .mx_FilteredDeviceListHeader,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_FilteredDeviceListHeader {
  background-color: #141518 !important;
  border: 1px solid #27272a !important;
  color: #94a3b8 !important;
}

.mx_FilteredDeviceList_list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.mx_FilteredDeviceList_listItem {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

.mx_SelectableDeviceTile_checkbox {
  flex: 1 1 auto !important;
  width: 100% !important;
}

.mx_SecurityRecommendations_spacing {
  height: 10px !important;
}

/* 27.4 Notification Choice Cards */
body.cpd-theme-dark .mx_UserNotifSettings_option,
body.theme-dark .mx_UserNotifSettings_option,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserNotifSettings_option {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

body.cpd-theme-dark .mx_UserNotifSettings_option:hover,
body.theme-dark .mx_UserNotifSettings_option:hover,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserNotifSettings_option:hover {
  border-color: #10b981 !important;
}

body.cpd-theme-dark .mx_UserNotifSettings_grid,
body.theme-dark .mx_UserNotifSettings_grid,
body:not(.cpd-theme-light):not(.theme-light) .mx_UserNotifSettings_grid {
  border-color: #27272a !important;
}

/* 27.5 Labs Beta Cards */
body.cpd-theme-dark .mx_BetaCard,
body.theme-dark .mx_BetaCard,
body:not(.cpd-theme-light):not(.theme-light) .mx_BetaCard {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  border-radius: 12px !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-dark .mx_BetaCard_title,
body.theme-dark .mx_BetaCard_title,
body:not(.cpd-theme-light):not(.theme-light) .mx_BetaCard_title {
  color: #ffffff !important;
}

body.cpd-theme-dark .mx_BetaCard_caption,
body.theme-dark .mx_BetaCard_caption,
body:not(.cpd-theme-light):not(.theme-light) .mx_BetaCard_caption {
  color: #94a3b8 !important;
}

body.cpd-theme-dark .mx_BetaCard_betaPill,
body.theme-dark .mx_BetaCard_betaPill,
body:not(.cpd-theme-light):not(.theme-light) .mx_BetaCard_betaPill {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* ==========================================================================
   28. Pinned Message Banners, Offline Network Indicators & Status Bar
   ========================================================================== */

/* 28.1 Pinned Message Banner */
body.cpd-theme-dark .mx_PinnedEventBar,
body.theme-dark .mx_PinnedEventBar,
body:not(.cpd-theme-light):not(.theme-light) .mx_PinnedEventBar {
  background-color: #18191c !important;
  border-bottom: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_PinnedEventBar,
body.theme-light .mx_PinnedEventBar {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.cpd-theme-dark .mx_PinnedEventBar_sender,
body.theme-dark .mx_PinnedEventBar_sender,
body:not(.cpd-theme-light):not(.theme-light) .mx_PinnedEventBar_sender {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_PinnedEventBar_sender,
body.theme-light .mx_PinnedEventBar_sender {
  color: #0369a1 !important;
  font-weight: 600 !important;
}

/* 28.2 Room Status Bar (Offline / Reconnecting / Key Warnings) */
body.cpd-theme-dark .mx_RoomStatusBar,
body.theme-dark .mx_RoomStatusBar,
body:not(.cpd-theme-light):not(.theme-light) .mx_RoomStatusBar {
  background-color: #18191c !important;
  border-top: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.cpd-theme-light .mx_RoomStatusBar,
body.theme-light .mx_RoomStatusBar {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* 28.3 Network Resilience Offline Banner */
body.theme-light #sc-network-toast,
body.cpd-theme-light #sc-network-toast,
body.theme-light .sc-network-toast,
body.cpd-theme-light .sc-network-toast {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

body.theme-light #sc-network-toast svg,
body.cpd-theme-light #sc-network-toast svg {
  color: #b45309 !important;
  stroke: #b45309 !important;
}



/* ==========================================================================
   Pure CSS Vector Mask Icon System (Zero DOM Injection)
   ========================================================================== */
.sc-btn-icon {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  background-color: currentColor !important;
  mask-size: contain !important;
  -webkit-mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
  pointer-events: none !important;
}

.sc-btn-icon-shield {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-key {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 10h-8.35A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4h-2zm-14 4c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 10h-8.35A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4h-2zm-14 4c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-close {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-check {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-refresh {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-copy {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-arrow-left {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E") !important;
}

.sc-btn-icon-trash {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") !important;
}

/* Static Semantic Mobile Back Navigation Anchor */
#sc-mobile-back.sc-mobile-back-link {
  display: none !important;
}

@media (max-width: 767.98px) {
  .mx_MatrixChat:has(.mx_RoomView) ~ #sc-mobile-back.sc-mobile-back-link,
  .mx_MatrixChat:has(.mx_RoomView) #sc-mobile-back.sc-mobile-back-link,
  #sc-mobile-back.sc-mobile-back-link {
    display: none !important;
  }

  .mx_MatrixChat:has(.mx_RoomView) ~ #sc-mobile-back,
  body:has(.mx_RoomView) #sc-mobile-back {
    display: flex !important;
    position: fixed !important;
    top: calc(max(6px, env(safe-area-inset-top, 0px)) + 2px) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    z-index: 1000 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    background: transparent !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cpd-color-icon-primary, #ffffff) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
  }

  body:has(.mx_RoomView) #sc-mobile-back:active {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: scale(0.92) !important;
  }

  body.theme-light:has(.mx_RoomView) #sc-mobile-back,
  body.cpd-theme-light:has(.mx_RoomView) #sc-mobile-back {
    color: #0f172a !important;
  }

  body.theme-light:has(.mx_RoomView) #sc-mobile-back:active,
  body.cpd-theme-light:has(.mx_RoomView) #sc-mobile-back:active {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  #sc-mobile-back svg,
  #sc-mobile-back .sc-btn-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ==========================================================================
   Settings Modal: Remove Experimental Features (Labs) tab completely
   ========================================================================== */
.mx_TabbedView_tabLabel[aria-controls="USER_LABS_TAB"],
.mx_TabbedView_tabLabel:has(#USER_LABS_TAB_label),
.mx_TabbedView_tabLabel:has([data-tab-id="USER_LABS_TAB"]),
.mx_TabbedView_tabLabel[data-tab-id="USER_LABS_TAB"],
li[aria-controls="USER_LABS_TAB"],
li:has(> #USER_LABS_TAB_label),
[data-testid="UserSettingsLabs"],
.mx_LabsUserSettingsTab,
.mx_TabbedView_tabPanel[aria-labelledby="USER_LABS_TAB_label"] {
  display: none !important;
}

/* ==========================================================================
   Settings Modal: Remove Help & About (Trợ giúp & giới thiệu) tab completely
   ========================================================================== */
.mx_TabbedView_tabLabel[aria-controls="USER_HELP_TAB"],
.mx_TabbedView_tabLabel[aria-controls="mx_tabpanel_USER_HELP_TAB"],
.mx_TabbedView_tabLabel:has(#USER_HELP_TAB_label),
.mx_TabbedView_tabLabel:has(#mx_tabpanel_USER_HELP_TAB_label),
.mx_TabbedView_tabLabel:has([data-tab-id="USER_HELP_TAB"]),
.mx_TabbedView_tabLabel[data-tab-id="USER_HELP_TAB"],
.mx_TabbedView_tabLabel[data-testid="settings-tab-USER_HELP_TAB"],
.mx_TabbedView_tabLabel:has(.mx_UserSettingsDialog_helpIcon),
li[aria-controls="USER_HELP_TAB"],
li[aria-controls="mx_tabpanel_USER_HELP_TAB"],
li:has(> #USER_HELP_TAB_label),
li:has(> #mx_tabpanel_USER_HELP_TAB_label),
li:has(.mx_UserSettingsDialog_helpIcon),
[data-testid="settings-tab-USER_HELP_TAB"],
[data-testid="UserSettingsHelpAbout"],
.mx_HelpUserSettingsTab,
#mx_tabpanel_USER_HELP_TAB,
.mx_TabbedView_tabPanel[aria-labelledby="USER_HELP_TAB_label"],
.mx_TabbedView_tabPanel[aria-labelledby="mx_tabpanel_USER_HELP_TAB_label"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Settings Modal: Language & Region (Ngôn ngữ & khu vực) Redesign
   ========================================================================== */
.mx_SettingsSubsection_dropdown {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

body.cpd-theme-dark .mx_SettingsSubsection_dropdown,
body.theme-dark .mx_SettingsSubsection_dropdown,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown {
  color: #a1a1aa !important;
}

body.cpd-theme-light .mx_SettingsSubsection_dropdown,
body.theme-light .mx_SettingsSubsection_dropdown,
body[class*="light"] .mx_SettingsSubsection_dropdown {
  color: #475569 !important;
}

.mx_LanguageDropdown,
.mx_SettingsSubsection_dropdown .mx_Dropdown {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  margin-top: 2px !important;
}

/* Dropdown trigger button */
.mx_LanguageDropdown .mx_Dropdown_input,
.mx_SettingsSubsection_dropdown .mx_Dropdown_input {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_input,
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_input,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_LanguageDropdown .mx_Dropdown_input,
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_input,
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_input,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown .mx_Dropdown_input {
  background-color: #141518 !important;
  border: 1px solid #2e3036 !important;
  color: #f4f4f5 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_input:hover,
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_input:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_LanguageDropdown .mx_Dropdown_input:hover,
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_input:hover,
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_input:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown .mx_Dropdown_input:hover {
  background-color: #1a1b20 !important;
  border-color: #40434c !important;
}

body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_input,
body.theme-light .mx_LanguageDropdown .mx_Dropdown_input,
body[class*="light"] .mx_LanguageDropdown .mx_Dropdown_input,
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_input,
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_input,
body[class*="light"] .mx_SettingsSubsection_dropdown .mx_Dropdown_input {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_input:hover,
body.theme-light .mx_LanguageDropdown .mx_Dropdown_input:hover,
body[class*="light"] .mx_LanguageDropdown .mx_Dropdown_input:hover,
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_input:hover,
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_input:hover,
body[class*="light"] .mx_SettingsSubsection_dropdown .mx_Dropdown_input:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}

.mx_LanguageDropdown.mx_Dropdown_open .mx_Dropdown_input,
.mx_LanguageDropdown .mx_Dropdown_input:focus,
.mx_LanguageDropdown .mx_Dropdown_input:focus-visible,
.mx_SettingsSubsection_dropdown .mx_Dropdown.mx_Dropdown_open .mx_Dropdown_input,
.mx_SettingsSubsection_dropdown .mx_Dropdown_input:focus,
.mx_SettingsSubsection_dropdown .mx_Dropdown_input:focus-visible {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important;
  outline: none !important;
}

/* Selected option text inside trigger */
.mx_LanguageDropdown .mx_Dropdown_input .mx_Dropdown_option,
.mx_LanguageDropdown .mx_Dropdown_input > .mx_Dropdown_option,
.mx_SettingsSubsection_dropdown .mx_Dropdown_input .mx_Dropdown_option,
.mx_SettingsSubsection_dropdown .mx_Dropdown_input > .mx_Dropdown_option {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}

/* Arrow indicator */
.mx_LanguageDropdown .mx_Dropdown_arrow,
.mx_SettingsSubsection_dropdown .mx_Dropdown_arrow {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  margin-right: 0 !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0.75 !important;
}

.mx_LanguageDropdown.mx_Dropdown_open .mx_Dropdown_arrow,
.mx_SettingsSubsection_dropdown .mx_Dropdown.mx_Dropdown_open .mx_Dropdown_arrow {
  transform: rotate(180deg) !important;
}

/* Dropdown Menu Popup */
.mx_LanguageDropdown .mx_Dropdown_menu,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu {
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  border-radius: 12px !important;
  padding: 6px !important;
  max-height: 240px !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
  overflow: hidden !important;
}

body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_menu,
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_menu,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_LanguageDropdown .mx_Dropdown_menu,
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu,
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown .mx_Dropdown_menu {
  background-color: #16171b !important;
  border: 1px solid #2e3036 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_menu,
body.theme-light .mx_LanguageDropdown .mx_Dropdown_menu,
body[class*="light"] .mx_LanguageDropdown .mx_Dropdown_menu,
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu,
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu,
body[class*="light"] .mx_SettingsSubsection_dropdown .mx_Dropdown_menu {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Search input when dropdown is expanded: must be visible and fill the box nicely */
.mx_LanguageDropdown .mx_Dropdown_searchPrompt,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_searchPrompt,
.mx_SettingsSubsection_dropdown .mx_Dropdown_searchPrompt {
  display: none !important;
}

.mx_LanguageDropdown input.mx_Dropdown_option,
.mx_LanguageDropdown .mx_Dropdown_input input.mx_Dropdown_option,
.mx_SettingsSubsection_dropdown input.mx_Dropdown_option,
.mx_SettingsSubsection_dropdown .mx_Dropdown_input input.mx_Dropdown_option {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 40px !important;
  line-height: 40px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  caret-color: #10b981 !important;
  box-sizing: border-box !important;
}

/* Individual options in menu: uniform alignment, zero hover offset */
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option,
.mx_LanguageDropdown .mx_Dropdown_menu li.mx_Dropdown_option,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu li.mx_Dropdown_option {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 2px 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
  border: none !important;
  outline: none !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option > div,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option > div {
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-transform: capitalize !important;
}

.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option::before,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option::after,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option > div::before,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option > div::after,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option::before,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option::after,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option > div::before,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option > div::after {
  display: none !important;
  content: none !important;
}

/* Strict uniform padding and margin on hover, highlight, and selected states */
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option.mx_Dropdown_option_highlight,
.mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option.mx_Dropdown_option_highlight,
.mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"] {
  height: 42px !important;
  min-height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
  margin: 2px 0 !important;
  box-sizing: border-box !important;
}

body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option,
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option {
  color: #e4e4e7 !important;
  background-color: transparent !important;
}

body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight {
  background-color: #26272c !important;
  color: #ffffff !important;
}

body.cpd-theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.theme-dark .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.cpd-theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.theme-dark .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"] {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  font-weight: 600 !important;
}

body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
body.theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
body[class*="light"] .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option,
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option,
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option,
body[class*="light"] .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option {
  color: #1e293b !important;
  background-color: transparent !important;
}

body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body[class*="light"] .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body[class*="light"] .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option:hover,
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight,
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option_highlight {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

body.cpd-theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.theme-light .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body[class*="light"] .mx_LanguageDropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.cpd-theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body.theme-light .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"],
body[class*="light"] .mx_SettingsSubsection_dropdown .mx_Dropdown_menu .mx_Dropdown_option[aria-selected="true"] {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

/* Hint text below dropdown */
.mx_PreferencesUserSettingsTab_section_hint {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

body.cpd-theme-dark .mx_PreferencesUserSettingsTab_section_hint,
body.theme-dark .mx_PreferencesUserSettingsTab_section_hint,
body:not([class*="light"]):not(.theme-light):not(.cpd-theme-light) .mx_PreferencesUserSettingsTab_section_hint {
  color: #71717a !important;
}

body.cpd-theme-light .mx_PreferencesUserSettingsTab_section_hint,
body.theme-light .mx_PreferencesUserSettingsTab_section_hint,
body[class*="light"] .mx_PreferencesUserSettingsTab_section_hint {
  color: #64748b !important;
}

/* Remove experimental features / Labs tab entirely from settings modal */
.mx_UserSettingsDialog .mx_TabbedView_tabLabel[aria-controls="mx_tabpanel_USER_LABS_TAB"],
.mx_UserSettingsDialog .mx_TabbedView_tabLabel[aria-controls="mx_tabpanel_USER_MJOLNIR_TAB"],
.mx_UserSettingsDialog .mx_TabbedView_tabLabel[aria-controls="USER_LABS_TAB"],
.mx_UserSettingsDialog .mx_TabbedView_tabLabel[aria-controls="USER_MJOLNIR_TAB"],
.mx_UserSettingsDialog [data-testid="UserSettingsLabs"],
.mx_UserSettingsDialog [data-testid="UserSettingMjolnir"],
.mx_TabbedView_tabLabel[aria-controls="mx_tabpanel_USER_LABS_TAB"],
.mx_TabbedView_tabLabel[aria-controls="mx_tabpanel_USER_MJOLNIR_TAB"],
#mx_tabpanel_USER_LABS_TAB,
#mx_tabpanel_USER_MJOLNIR_TAB,
.mx_LabsUserSettingsTab {
  display: none !important;
}

/* ==========================================================================
   Appearance Tab: Theme Selectors & System Theme Switch Inline Layout
   ========================================================================== */
.mx_ThemeChoicePanel_ThemeSelectors,
form.mx_ThemeChoicePanel_ThemeSelectors,
.mx_AppearanceUserSettingsTab form.mx_ThemeChoicePanel_ThemeSelectors,
.mx_SettingsTab form.mx_ThemeChoicePanel_ThemeSelectors,
.mx_SettingsSubsection_content > form.mx_ThemeChoicePanel_ThemeSelectors {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.mx_ThemeChoicePanel_themeSelector,
.mx_ThemeChoicePanel_ThemeSelectors .mx_ThemeChoicePanel_themeSelector,
.mx_ThemeChoicePanel_ThemeSelectors [class*="_inline-field"] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  margin: 0 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.mx_ThemeChoicePanel_themeSelector:active:not(.mx_ThemeChoicePanel_themeSelector_disabled):not(:has(input[disabled])) {
  transform: scale(0.985) !important;
  transition: transform 0.1s ease !important;
}

.mx_ThemeChoicePanel_themeSelector:focus-within,
.mx_ThemeChoicePanel_themeSelector:has(input:focus-visible) {
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}

/* Expand the radio button across the entire selection card area */
.mx_ThemeChoicePanel_themeSelector input[type="radio"],
.mx_ThemeChoicePanel_ThemeSelectors .mx_ThemeChoicePanel_themeSelector input[type="radio"],
.mx_ThemeChoicePanel_ThemeSelectors [class*="_inline-field"] input[type="radio"] {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.mx_ThemeChoicePanel_themeSelector.mx_ThemeChoicePanel_themeSelector_disabled input[type="radio"],
.mx_ThemeChoicePanel_themeSelector:has(input[disabled]) input[type="radio"] {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.mx_ThemeChoicePanel_themeSelector [class*="inline-field-control"],
.mx_ThemeChoicePanel_themeSelector [class*="-control"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.mx_ThemeChoicePanel_themeSelector [class*="inline-field-body"],
.mx_ThemeChoicePanel_themeSelector [class*="-body"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  pointer-events: none !important;
}

.mx_ThemeChoicePanel_themeSelector .mx_ThemeChoicePanel_themeSelector_Label,
.mx_ThemeChoicePanel_themeSelector label,
.mx_ThemeChoicePanel_themeSelector [class*="_label"] {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-align: left !important;
  pointer-events: none !important;
}

/* Sidebar Search Bar Single-Border Guarantee */
.mx_RoomSearch,
.mx_RoomSearch.mx_AccessibleButton,
.mx_RoomSearch:focus,
.mx_RoomSearch:focus-visible,
.mx_RoomSearch:focus-within,
.mx_RoomSearch.mx_AccessibleButton:focus,
.mx_RoomSearch.mx_AccessibleButton:focus-visible,
.mx_RoomSearch.mx_AccessibleButton:focus-within,
.mx_LeftPanel_filterContainer .mx_RoomSearch,
.mx_LeftPanel_filterContainer .mx_RoomSearch.mx_AccessibleButton,
.mx_LeftPanel_filterContainer .mx_RoomSearch:focus,
.mx_LeftPanel_filterContainer .mx_RoomSearch:focus-visible,
.mx_LeftPanel_filterContainer .mx_RoomSearch:focus-within {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

body.theme-dark .mx_RoomSearch:focus,
body.cpd-theme-dark .mx_RoomSearch:focus,
body.theme-dark .mx_RoomSearch:focus-visible,
body.cpd-theme-dark .mx_RoomSearch:focus-visible,
body.theme-dark .mx_LeftPanel_filterContainer .mx_RoomSearch:focus,
body.cpd-theme-dark .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-visible {
  border: 1px solid #10b981 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.theme-light .mx_RoomSearch:focus,
body.cpd-theme-light .mx_RoomSearch:focus,
body.theme-light .mx_RoomSearch:focus-visible,
body.cpd-theme-light .mx_RoomSearch:focus-visible,
body.theme-light .mx_LeftPanel_filterContainer .mx_RoomSearch:focus,
body.cpd-theme-light .mx_LeftPanel_filterContainer .mx_RoomSearch:focus-visible {
  border: 1px solid #10b981 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Completely Remove / Hide Room Topic & Description Everywhere
   ========================================================================== */
.mx_RoomSummaryCard_topic,
.mx_RoomSummaryCard_topic_container,
.mx_RoomSummaryCard_topic_edit,
.mx_RoomSummaryCard_topic_chevron,
.mx_RoomSummaryCard_topic_collapsed,
.mx_RoomHeader_topic,
.mx_RoomTopic,
.mx_RoomPreviewCard_topic,
.mx_SpaceRoomView_landing_topic,
.mx_SpotlightDialog_result_publicRoomTopic,
.mx_RoomProfileSettings_profile_controls_topic,
#profileTopic,
.mx_CreateRoomDialog_topic,
.mx_RoomIntro_topic,
[data-testid="room-topic"],
.mx_Field[data-field-id="profileTopic"],
input[name="spaceTopic"],
textarea[name="spaceTopic"],
.mx_Field:has(#profileTopic),
.mx_Field:has([name="spaceTopic"]) {
  display: none !important;
}

/* ==========================================================================
   Autocomplete Input & Privileged User Permission Polish
   (Single seamless border, eliminates nested inner input borders)
   ========================================================================== */
.mx_SettingsFieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  background: transparent !important;
}

.mx_SettingsFieldset_legend {
  color: var(--cpd-color-text-primary) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.mx_SettingsFieldset_description {
  color: var(--cpd-color-text-secondary) !important;
  font-size: 0.875rem !important;
  margin-bottom: 12px !important;
}

.mx_SettingsFieldset_content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 12px !important;
}

.mx_RoomSettingsDialog .mx_SettingsSection {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.mx_RoomSettingsDialog .mx_SettingsSection:first-child {
  margin-top: 0 !important;
}

.mx_RoomSettingsDialog .mx_SettingsSection > h2,
.mx_RoomSettingsDialog .mx_Heading_h2 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  color: var(--cpd-color-text-primary, #f4f4f5) !important;
}

.mx_RoomSettingsDialog .mx_SettingsSection_subSections {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-gap: 16px !important;
  padding: 4px 0 !important;
}

.mx_AutocompleteInput {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

.mx_AutocompleteInput_editor {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  box-sizing: border-box !important;
  cursor: text !important;
  gap: 6px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* Dark mode autocomplete editor */
body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_editor,
body.theme-dark .mx_AutocompleteInput_editor,
body.cpd-theme-dark .mx_AutocompleteInput_editor {
  background-color: #131417 !important;
  border: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_editor:hover,
body.theme-dark .mx_AutocompleteInput_editor:hover,
body.cpd-theme-dark .mx_AutocompleteInput_editor:hover {
  border-color: #3f3f46 !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_editor.mx_AutocompleteInput_editor--focused,
body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_editor:focus-within,
body.theme-dark .mx_AutocompleteInput_editor.mx_AutocompleteInput_editor--focused,
body.theme-dark .mx_AutocompleteInput_editor:focus-within,
body.cpd-theme-dark .mx_AutocompleteInput_editor.mx_AutocompleteInput_editor--focused,
body.cpd-theme-dark .mx_AutocompleteInput_editor:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
  outline: none !important;
}

/* Light mode autocomplete editor */
body.theme-light .mx_AutocompleteInput_editor,
body.cpd-theme-light .mx_AutocompleteInput_editor {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

body.theme-light .mx_AutocompleteInput_editor:hover,
body.cpd-theme-light .mx_AutocompleteInput_editor:hover {
  border-color: rgba(0, 0, 0, 0.28) !important;
}

body.theme-light .mx_AutocompleteInput_editor.mx_AutocompleteInput_editor--focused,
body.theme-light .mx_AutocompleteInput_editor:focus-within,
body.cpd-theme-light .mx_AutocompleteInput_editor.mx_AutocompleteInput_editor--focused,
body.cpd-theme-light .mx_AutocompleteInput_editor:focus-within {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important;
  outline: none !important;
}

/* Search Icon */
.mx_AutocompleteInput_search_icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 4px 0 2px !important;
  fill: var(--cpd-color-icon-secondary, #94a3b8) !important;
  color: var(--cpd-color-icon-secondary, #94a3b8) !important;
  flex-shrink: 0 !important;
}

/* Complete reset of the inner text input - NO nested borders or shadows */
.mx_AutocompleteInput_editor > input,
.mx_AutocompleteInput_editor input[type="text"],
.mx_AutocompleteInput_editor input,
.mx_AutocompleteInput input[type="text"],
.mx_AutocompleteInput input {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 20px !important;
  flex: 1 1 140px !important;
  font-size: 14px !important;
  color: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.mx_AutocompleteInput_editor > input:focus,
.mx_AutocompleteInput_editor > input:focus-visible,
.mx_AutocompleteInput_editor input[type="text"]:focus,
.mx_AutocompleteInput_editor input[type="text"]:focus-visible,
.mx_AutocompleteInput_editor input:focus,
.mx_AutocompleteInput_editor input:focus-visible,
.mx_AutocompleteInput input[type="text"]:focus,
.mx_AutocompleteInput input[type="text"]:focus-visible,
.mx_AutocompleteInput input:focus,
.mx_AutocompleteInput input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Placeholder colors */
body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_editor input::placeholder,
body.theme-dark .mx_AutocompleteInput_editor input::placeholder,
body.cpd-theme-dark .mx_AutocompleteInput_editor input::placeholder {
  color: #71717a !important;
  opacity: 1 !important;
}

body.theme-light .mx_AutocompleteInput_editor input::placeholder,
body.cpd-theme-light .mx_AutocompleteInput_editor input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Selected pills inside editor */
.mx_AutocompleteInput_editor_selection {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 2px 4px !important;
}

.mx_AutocompleteInput_editor_selection_pill {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

.mx_AutocompleteInput_editor_selection_remove_button {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: inherit !important;
}

/* Suggestions dropdown menu */
.mx_AutocompleteInput_matches {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin-top: 4px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_matches,
body.theme-dark .mx_AutocompleteInput_matches,
body.cpd-theme-dark .mx_AutocompleteInput_matches {
  background-color: #18191c !important;
  border: 1px solid #27272a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.theme-light .mx_AutocompleteInput_matches,
body.cpd-theme-light .mx_AutocompleteInput_matches {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.mx_AutocompleteInput_suggestion {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  transition: background-color 0.12s ease !important;
}

body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_suggestion:hover,
body:not(.theme-light):not(.cpd-theme-light) .mx_AutocompleteInput_suggestion--selected,
body.theme-dark .mx_AutocompleteInput_suggestion:hover,
body.theme-dark .mx_AutocompleteInput_suggestion--selected,
body.cpd-theme-dark .mx_AutocompleteInput_suggestion:hover,
body.cpd-theme-dark .mx_AutocompleteInput_suggestion--selected {
  background-color: #27272a !important;
}

body.theme-light .mx_AutocompleteInput_suggestion:hover,
body.theme-light .mx_AutocompleteInput_suggestion--selected,
body.cpd-theme-light .mx_AutocompleteInput_suggestion:hover,
body.cpd-theme-light .mx_AutocompleteInput_suggestion--selected {
  background-color: #f1f5f9 !important;
}





/* --- Room Upgrade Warning Bar Suppression --- */
.mx_RoomUpgradeWarningBar:not(.mx_RoomUpgradeWarningBar_upgraded),
.mx_RoomUpgradeWarningBar_header,
.mx_RoomUpgradeWarningBar_upgradelink,
.mx_RoomUpgradeWarningBar_small {
    display: none !important;
}