/* M2 BOX theme layer for CrossBox — loaded after core styles */
html[class*="active-theme-"] {
  --m2-primary: #55C8E8;
  --m2-dark: #0891b2;
  --m2-deep: #0369a1;
  --m2-ink: #05141f;
  --m2-navy: #0a2744;
  --m2-light: #f0f9ff;
  --m2-border: #e3edf5;
  --m2-glow: rgba(85, 200, 232, .25);
  --m2-bg: #f4f8fb;
  --m2-card: #ffffff;
  --m2-text: #111827;
  --m2-muted: #6b7280;
  --m2-radius: 14px;
  --m2-shadow: 0 1px 2px rgba(5, 20, 31, .04), 0 4px 16px rgba(5, 20, 31, .06);
  --m2-shadow-hover: 0 2px 4px rgba(5, 20, 31, .06), 0 10px 28px rgba(5, 20, 31, .10);
  --m2-grad: linear-gradient(135deg, #55C8E8 0%, #0891b2 100%);
  --m2-tone-blue: #3b82f6;
  --m2-tone-green: #22c55e;
  --m2-tone-violet: #8b5cf6;
  --m2-tone-amber: #f59e0b;
  --m2-tone-red: #ef4444;
  --m2-on-tone: #ffffff;
  --m2-icon: #4b5b6b;
  --m2-hover: rgba(85, 200, 232, .08);
  --m2-selected: rgba(85, 200, 232, .14);
  --m2-glass: rgba(255, 255, 255, .78);
  --m2-ring: 0 0 0 4px rgba(85, 200, 232, .22);
  --m2-font: "M2 Inter", "M2 Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m2-font-display: "M2 Space Grotesk", "M2 Cairo", "M2 Inter", sans-serif;
  --m2-font-brand: "M2 Orbitron", "M2 Space Grotesk", sans-serif;
}

html[class*="active-theme-"] body:not(.light-mode) {
  --m2-bg: #071521;
  --m2-card: #0c1f30;
  --m2-border: #15304a;
  --m2-text: #e5eef6;
  --m2-muted: #8fa3b5;
  --m2-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --m2-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
  --m2-icon: #9fb6c8;
  --m2-hover: rgba(85, 200, 232, .07);
  --m2-selected: rgba(85, 200, 232, .16);
  --m2-glass: rgba(12, 31, 48, .78);
  --m2-light: rgba(85, 200, 232, .10);
}

/* ---------- base ---------- */
html[class*="active-theme-"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[class*="active-theme-"] ::selection {
  background: var(--m2-glow);
}

html[class*="active-theme-"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[class*="active-theme-"] ::-webkit-scrollbar-track { background: transparent; }
html[class*="active-theme-"] ::-webkit-scrollbar-thumb {
  background: rgba(100, 125, 145, .35);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
html[class*="active-theme-"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 125, 145, .6); }

html[class*="active-theme-"] md-content#content {
  background: var(--m2-bg) !important;
}

/* ---------- top bar ---------- */
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) {
  background: var(--m2-card) !important;
  color: var(--m2-text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--m2-border);
}
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) .MuiToolbar-root {
  min-height: 60px;
}
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar),
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) .MuiIconButton-root,
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) .material-icons,
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) h6 {
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) h6 {
  font-weight: 700;
  letter-spacing: .2px;
}
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) .MuiIconButton-root:hover {
  background: var(--m2-light);
  color: var(--m2-dark) !important;
}

/* ---------- angular page toolbars (mail list, viewer, etc.) ---------- */
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) {
  background: var(--m2-card) !important;
  color: var(--m2-text) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--m2-border);
  min-height: 60px;
}
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) .md-toolbar-tools {
  height: 60px;
  max-height: 60px;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) h3 {
  font-weight: 700;
}
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) .md-button.md-icon-button,
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) md-icon,
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) .material-icons {
  color: var(--m2-icon) !important;
}
html[class*="active-theme-"] md-content#content md-toolbar .md-button.themable:not(.md-icon-button) {
  background: var(--m2-grad) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 0 18px;
  font-weight: 700;
  box-shadow: 0 4px 14px var(--m2-glow) !important;
}
html[data-m2-page="settings"]:not([data-m2-tabs="1"]) md-content#content form.login-form.minimize-padding {
  width: min(1240px, calc(100% - 44px));
  max-width: none;
}
html[class*="active-theme-"] md-content#content form.login-form.minimize-padding {
  max-width: 900px;
  margin: 24px auto;
  background: var(--m2-card);
  border: 1px solid var(--m2-border);
  border-radius: var(--m2-radius);
  box-shadow: var(--m2-shadow);
  padding: 8px 12px;
}
html[class*="active-theme-"] md-content#content md-toolbar .md-button.md-icon-button:hover {
  background: var(--m2-light) !important;
}
html[class*="active-theme-"] md-content#content md-toolbar .md-button.md-icon-button:hover md-icon,
html[class*="active-theme-"] md-content#content md-toolbar .md-button.md-icon-button:hover .material-icons {
  color: var(--m2-dark) !important;
}

/* ---------- mail list ---------- */
/* The date chip (Today / This week) sits on a 1px rule. An opaque fill
   covers that rule, and the chip is centered on it so the line cannot
   cut through the word. */
html[class*="active-theme-"] .bordered-separator-line-border {
  border-bottom-color: var(--m2-border) !important;
}
html[class*="active-theme-"] .bordered-separator-line-text {
  top: -1px !important;
  transform: translateY(-50%);
  z-index: 2;
  background: var(--m2-bg) !important;
  color: var(--m2-deep) !important;
  border: 1px solid #d6ecf7;
  border-radius: 999px !important;
  font-weight: 600;
  padding: 4px 14px;
}
html[class*="active-theme-"] body:not(.light-mode) .bordered-separator-line-text {
  background: var(--m2-bg) !important;
  border-color: rgba(85, 200, 232, .35);
  color: var(--m2-primary) !important;
}

/* ---------- side navigation ---------- */
html[class*="active-theme-"] .react-sidenav {
  background: linear-gradient(180deg, var(--m2-ink) 0%, var(--m2-navy) 100%) !important;
  color: #cfe3ef !important;
  border: 0 !important;
  box-shadow: 4px 0 24px rgba(5, 20, 31, .12) !important;
}
html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal {
  background: transparent !important;
  box-shadow: none !important;
}
html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal > .MuiDrawer-paper {
  width: min(320px, 86vw);
  background: linear-gradient(180deg, var(--m2-ink) 0%, var(--m2-navy) 100%) !important;
  color: #cfe3ef !important;
  border: 0 !important;
  box-shadow: 8px 0 32px rgba(5, 20, 31, .45) !important;
}
html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal > .MuiBackdrop-root {
  background: rgba(5, 20, 31, .55) !important;
}
html[class*="active-theme-"] .react-sidenav.MuiDrawer-paper,
html[class*="active-theme-"] .react-sidenav .MuiDrawer-paper {
  overflow-y: auto !important;
}
/* Chat menu fills the dock. The account bar stays put; only the conversation list scrolls. */
html[class*="active-theme-"] .MuiDrawer-docked > .MuiDrawer-paper:has(.see-main-menu) {
  overflow: hidden !important;
}
html[class*="active-theme-"] .drawer-condensed:has(.see-main-menu) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
html[class*="active-theme-"] .drawer-condensed:has(.see-main-menu) > .sidenav-part {
  flex: 0 0 auto !important;
}
html[class*="active-theme-"] .drawer-condensed > .see-main-menu {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
html[class*="active-theme-"] .drawer-condensed > .see-main-menu > div:first-child {
  flex: 0 0 auto !important;
}
html[class*="active-theme-"] .drawer-condensed > .see-main-menu > div:last-child,
html[class*="active-theme-"] .drawer-condensed [data-m2-chat-host] {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
html[class*="active-theme-"] .drawer-condensed [data-m2-chat-host] > .m2-hub-tabs,
html[class*="active-theme-"] .drawer-condensed [data-m2-chat-host] > .m2-online-strip {
  flex: 0 0 auto !important;
}
html[class*="active-theme-"] .drawer-condensed [data-m2-chat-host] > .chat-tabs {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}
/* Settings, Files, and Mail menus are long lists. Chat keeps its own scroller. */
html[class*="active-theme-"] .drawer-condensed > .see-main-menu > div:last-child:not([data-m2-chat-host]):not(:has([data-m2-chat-host])) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) nav.MuiList-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
html[class*="active-theme-"] .react-sidenav,
html[class*="active-theme-"] .react-sidenav * {
  scrollbar-width: thin;
  scrollbar-color: var(--m2-primary) transparent;
}
html[class*="active-theme-"] .react-sidenav::-webkit-scrollbar,
html[class*="active-theme-"] .react-sidenav ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[class*="active-theme-"] .react-sidenav::-webkit-scrollbar-track,
html[class*="active-theme-"] .react-sidenav ::-webkit-scrollbar-track {
  background: transparent;
}
html[class*="active-theme-"] .react-sidenav::-webkit-scrollbar-thumb,
html[class*="active-theme-"] .react-sidenav ::-webkit-scrollbar-thumb {
  background: var(--m2-primary);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html[class*="active-theme-"] .react-sidenav::-webkit-scrollbar-thumb:hover,
html[class*="active-theme-"] .react-sidenav ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--m2-primary) 72%, white);
  background-clip: content-box;
}
/* Sidebar Chat is its own menu, like Mail folders. The page keeps the list and the meetings. */
html[class*="active-theme-"] [data-m2-side-host] > :not(.m2-chat-nav):not(:has(md-fab-speed-dial)) {
  display: none !important;
}
html[data-m2-meet-page="1"] [data-m2-side-host] > :has(md-fab-speed-dial) {
  display: none !important;
}
html[class*="active-theme-"] [data-m2-side-host] > .m2-chat-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0 96px;
  font-family: var(--m2-font);
  color: #cfe3ef;
}
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-sec,
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-card,
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-empty,
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-label,
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-count {
  display: none !important;
}
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-group + .m2-nav-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(85, 200, 232, .12);
}
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-item,
html[class*="active-theme-"] .collapsed-condensed .m2-chat-nav .m2-nav-person {
  justify-content: center;
  margin: 0 6px;
  padding: 0;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-item,
html[class*="active-theme-"] .m2-chat-nav .m2-nav-person {
  display: flex;
  align-items: center;
  gap: 14px;
  width: auto;
  min-height: 44px;
  margin: 0 6px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #cfe3ef;
  font: 500 14.5px/1.2 var(--m2-font);
  text-align: start;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-item:hover,
html[class*="active-theme-"] .m2-chat-nav .m2-nav-person:hover {
  background: rgba(85, 200, 232, .10);
  color: #fff;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-item.on {
  background: rgba(85, 200, 232, .16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[dir="rtl"] .m2-chat-nav .m2-nav-item.on,
body[dir="rtl"] .m2-chat-nav .m2-nav-item.on {
  box-shadow: inset -3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-ico {
  flex: 0 0 auto;
  width: 24px;
  font-size: 22px;
  line-height: 24px;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-count,
html[class*="active-theme-"] .m2-chat-nav .m2-nav-dot {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(85, 200, 232, .18);
  color: #9be3f5;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 20px 6px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(207, 227, 239, .55);
  font: 700 11px/1 var(--m2-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: start;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-fold {
  cursor: pointer;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-fold > span:first-child { flex: 1; }
html[class*="active-theme-"] .m2-chat-nav .m2-nav-fold .material-icons {
  font-size: 18px;
  transition: transform .18s ease;
}
html[class*="active-theme-"] .m2-chat-nav.m2-nav-shut .m2-nav-fold .material-icons { transform: rotate(180deg); }
html[class*="active-theme-"] .m2-chat-nav.m2-nav-shut .m2-nav-people { display: none; }
html[class*="active-theme-"] .m2-chat-nav .m2-nav-people {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-person { gap: 12px; min-height: 40px; }
html[class*="active-theme-"] .m2-chat-nav .m2-nav-person .face {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--m2-grad);
  color: #05141f;
  font-size: 12px;
  font-weight: 700;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-person .face i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--m2-navy);
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-empty {
  margin: 0 20px;
  color: rgba(207, 227, 239, .6);
  font-size: 12.5px;
  line-height: 1.45;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 12px 0;
  padding: 14px;
  border: 1px solid rgba(85, 200, 232, .16);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(85, 200, 232, .10) 0%, rgba(255, 255, 255, .03) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #cfe3ef;
  font-family: var(--m2-font);
  text-align: start;
}
html[class*="active-theme-"] .m2-chat-nav button.m2-nav-card { cursor: pointer; }
html[class*="active-theme-"] .m2-chat-nav button.m2-nav-card:hover { border-color: rgba(85, 200, 232, .4); }
html[class*="active-theme-"] .m2-chat-nav .m2-nav-card small {
  color: #55c8e8;
  font: 700 11px/1 var(--m2-font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-card b {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[class*="active-theme-"] .m2-chat-nav .m2-nav-card span {
  color: rgba(207, 227, 239, .75);
  font-size: 12.5px;
}
html[class*="active-theme-"] .react-sidenav .sidenav-part {
  overflow: visible !important;
}
html[class*="active-theme-"] .react-sidenav header.notch-toolbar {
  position: sticky !important;
  top: 0;
  z-index: 8;
  background: var(--m2-ink) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(85, 200, 232, .12);
}
html[class*="active-theme-"] .react-sidenav header.notch-toolbar h4 {
  color: #fff !important;
}
html[class*="active-theme-"] .react-sidenav header.notch-toolbar h4 + h4,
html[class*="active-theme-"] .react-sidenav header.notch-toolbar h4.ellipsis:last-child {
  color: #8fb3c7 !important;
}
html[class*="active-theme-"] .react-sidenav header.notch-toolbar > div {
  display: block !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html[class*="active-theme-"] .react-sidenav .profile-toolbar .most-notified-holder,
html[class*="active-theme-"] .react-sidenav .profile-toolbar .background-ghost {
  display: none !important;
}
html[class*="active-theme-"] .react-sidenav .MuiListItem-root {
  color: #cfe3ef !important;
  border-radius: 10px;
  margin: 2px 6px;
  width: auto;
  transition: background .18s ease, color .18s ease;
}
html[class*="active-theme-"] .react-sidenav .MuiListItem-root:hover {
  background: rgba(85, 200, 232, .10) !important;
  color: #fff !important;
}
html[class*="active-theme-"] .react-sidenav .MuiListItem-root.Mui-selected,
html[data-m2-home="1"] .react-sidenav [menu-item-type="dashboard"] {
  background: rgba(85, 200, 232, .16) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[dir="rtl"] .react-sidenav .MuiListItem-root.Mui-selected,
body[dir="rtl"] .react-sidenav .MuiListItem-root.Mui-selected,
html[dir="rtl"][data-m2-home="1"] .react-sidenav [menu-item-type="dashboard"],
body[dir="rtl"][data-m2-home="1"] .react-sidenav [menu-item-type="dashboard"] {
  box-shadow: inset -3px 0 0 var(--m2-primary);
}
html[data-m2-oncal="1"] .react-sidenav .MuiListItem-root.Mui-selected:not([data-m2-calnav]),
html[data-m2-oncal="1"] .react-sidenav [menu-item-type="dashboard"] {
  background: transparent !important;
  color: #cfe3ef !important;
  box-shadow: none !important;
}
html[data-m2-oncal="1"] .react-sidenav .MuiListItem-root.Mui-selected:not([data-m2-calnav]) .material-icons,
html[data-m2-oncal="1"] .react-sidenav .MuiListItem-root.Mui-selected:not([data-m2-calnav]) .MuiListItemIcon-root,
html[data-m2-oncal="1"] .react-sidenav [menu-item-type="dashboard"] .material-icons,
html[data-m2-oncal="1"] .react-sidenav [menu-item-type="dashboard"] .MuiListItemIcon-root {
  color: #7fb9d3 !important;
}
html[class*="active-theme-"] .react-sidenav .MuiListItemIcon-root,
html[class*="active-theme-"] .react-sidenav .material-icons:not([class*="presence-text-indicator"]),
html[class*="active-theme-"] .react-sidenav .MuiSvgIcon-root {
  color: #7fb9d3 !important;
}
html[class*="active-theme-"] .react-sidenav .MuiListItem-root:hover .MuiListItemIcon-root,
html[class*="active-theme-"] .react-sidenav .MuiListItem-root.Mui-selected .MuiListItemIcon-root,
html[class*="active-theme-"] .react-sidenav .MuiListItem-root.Mui-selected .material-icons,
html[data-m2-home="1"] .react-sidenav [menu-item-type="dashboard"] .MuiListItemIcon-root,
html[data-m2-home="1"] .react-sidenav [menu-item-type="dashboard"] .material-icons {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .react-sidenav p,
html[class*="active-theme-"] .react-sidenav span,
html[class*="active-theme-"] .react-sidenav .MuiTypography-root {
  color: inherit;
}
html[class*="active-theme-"] .react-sidenav .MuiTypography-colorTextSecondary,
html[class*="active-theme-"] .react-sidenav .MuiListItemText-secondary,
html[class*="active-theme-"] .react-sidenav .md-caption,
html[class*="active-theme-"] .react-sidenav [class*="empty"],
html[class*="active-theme-"] .react-sidenav [class*="no-items"] {
  color: #8fb3c7 !important;
}
html[class*="active-theme-"] .react-sidenav .red-counter {
  color: #fff !important;
}
html[class*="active-theme-"] .react-sidenav .MuiTab-root {
  color: #8fb3c7 !important;
  opacity: 1;
  font-weight: 600;
}
html[class*="active-theme-"] .react-sidenav .MuiTab-root.Mui-selected {
  color: #fff !important;
}
html[class*="active-theme-"] .react-sidenav .MuiTabs-indicator {
  background: var(--m2-primary) !important;
  height: 3px;
  border-radius: 3px 3px 0 0;
}
html[class*="active-theme-"] .react-sidenav .MuiLinearProgress-root {
  background: rgba(85, 200, 232, .14) !important;
  border-radius: 4px;
  height: 5px;
}
html[class*="active-theme-"] .react-sidenav .MuiLinearProgress-bar {
  background: var(--m2-grad) !important;
  border-radius: 4px;
}
html[class*="active-theme-"] .react-sidenav input,
html[class*="active-theme-"] .react-sidenav .MuiInputBase-root {
  color: #e5f4fb !important;
}
html[class*="active-theme-"] .react-sidenav .MuiOutlinedInput-notchedOutline,
html[class*="active-theme-"] .react-sidenav .MuiInput-underline::before {
  border-color: rgba(85, 200, 232, .25) !important;
}
html[class*="active-theme-"] .react-sidenav .MuiSwitch-thumb {
  color: #e5f4fb;
}
html[class*="active-theme-"] .react-sidenav .MuiSwitch-track {
  background-color: #3b5870 !important;
  opacity: 1 !important;
}
html[class*="active-theme-"] .react-sidenav .Mui-checked .MuiSwitch-thumb {
  color: var(--m2-primary);
}
html[class*="active-theme-"] .react-sidenav .Mui-checked + .MuiSwitch-track {
  background-color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .react-sidenav .MuiDivider-root {
  background-color: rgba(85, 200, 232, .10) !important;
}
html[class*="active-theme-"] .react-sidenav .MuiBadge-badge {
  background: var(--m2-primary) !important;
  color: var(--m2-ink) !important;
  font-weight: 700;
}

/* ---------- cards / dashboard widgets ---------- */
html[class*="active-theme-"] .react-grid-item.MuiCard-root {
  background: var(--m2-card) !important;
  border: 1px solid var(--m2-border);
  border-radius: var(--m2-radius) !important;
  box-shadow: var(--m2-shadow) !important;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root:hover {
  box-shadow: var(--m2-shadow-hover) !important;
}
html[class*="active-theme-"] .m2-whead {
  position: relative;
  background: transparent !important;
  color: var(--m2-text) !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--m2-border);
  padding-inline-start: 6px;
}
html[class*="active-theme-"] .m2-whead::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: var(--m2-accent, var(--m2-primary));
}
html[class*="active-theme-"] .react-grid-item > .MuiCardContent-root > div:first-child:not(.m2-whead) {
  border-bottom: 1px solid var(--m2-border);
  font-family: var(--m2-font-display) !important;
  font-weight: 700 !important;
}
html[class*="active-theme-"] .m2-whead .material-icons {
  color: var(--m2-muted) !important;
}

html[class*="active-theme-"] .MuiPaper-rounded,
html[class*="active-theme-"] md-card,
html[class*="active-theme-"] md-dialog {
  border-radius: var(--m2-radius) !important;
}
html[class*="active-theme-"] .MuiPopover-paper,
html[class*="active-theme-"] .MuiMenu-paper,
html[class*="active-theme-"] md-menu-content {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(5, 20, 31, .16) !important;
  border: 1px solid var(--m2-border);
}

/* ---------- buttons ---------- */
html[class*="active-theme-"] .md-button.md-raised.md-primary,
html[class*="active-theme-"] .md-button.md-primary.md-raised:not([disabled]),
html[class*="active-theme-"] .MuiButton-containedPrimary {
  background: var(--m2-grad) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px var(--m2-glow) !important;
  font-weight: 700;
  letter-spacing: .3px;
}
html[class*="active-theme-"] .md-button.md-raised.md-primary:hover,
html[class*="active-theme-"] .MuiButton-containedPrimary:hover {
  box-shadow: 0 6px 20px rgba(8, 145, 178, .35) !important;
  filter: brightness(1.04);
}
html[class*="active-theme-"] .md-button,
html[class*="active-theme-"] .MuiButton-root {
  border-radius: 10px !important;
}
html[class*="active-theme-"] md-fab-trigger .md-button.md-fab,
html[class*="active-theme-"] .md-button.md-fab,
html[class*="active-theme-"] .MuiFab-root {
  background: var(--m2-grad) !important;
  box-shadow: 0 8px 24px rgba(8, 145, 178, .35) !important;
  color: #fff !important;
}
html[class*="active-theme-"] .md-button.md-fab md-icon,
html[class*="active-theme-"] .md-button.md-fab .material-icons,
html[class*="active-theme-"] .md-button.md-fab span,
html[class*="active-theme-"] .MuiFab-root .material-icons,
html[class*="active-theme-"] .MuiFab-root .MuiFab-label {
  color: #fff !important;
}

/* ---------- dialog toolbars (compose, viewers) ---------- */
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) {
  background: linear-gradient(135deg, var(--m2-ink) 0%, var(--m2-navy) 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(85, 200, 232, .18);
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools,
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) h2,
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) h3,
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-icon-button,
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) md-icon {
  color: #fff !important;
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-icon-button:hover {
  background: rgba(85, 200, 232, .14) !important;
}

/* ---------- drop zones ---------- */
html[class*="active-theme-"] .dashboard-quick-upload {
  border: 2px dashed #b7dff0 !important;
  border-radius: 12px !important;
  background-color: rgba(85, 200, 232, .05) !important;
  margin: 0;
  top: 60px !important;
  left: 12px !important;
  right: 12px;
  bottom: 12px;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
html[class*="active-theme-"] .dashboard-quick-upload .dashboard-no-items {
  padding-top: 0;
}
html[class*="active-theme-"] .dashboard-quick-upload-dropping {
  border-color: var(--m2-primary) !important;
  background-color: rgba(85, 200, 232, .16) !important;
}

/* ---------- empty-state illustrations ---------- */
html[class*="active-theme-"] img[src*="iconset/random/colorized/"] {
  filter: drop-shadow(0 10px 18px rgba(8, 145, 178, .22));
}
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/chat.png"] { content: url("/m2theme/icons/chat.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/conversations.png"] { content: url("/m2theme/icons/conversations.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/contacts.png"] { content: url("/m2theme/icons/contacts.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/files.png"] { content: url("/m2theme/icons/files.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/mail.png"] { content: url("/m2theme/icons/mail.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/media.png"] { content: url("/m2theme/icons/media.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/reminder.png"] { content: url("/m2theme/icons/reminder.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/time.png"] { content: url("/m2theme/icons/time.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/send.png"] { content: url("/m2theme/icons/send.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/scheduled_message.png"] { content: url("/m2theme/icons/scheduled_message.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/trash.png"] { content: url("/m2theme/icons/trash.svg"); }
html[class*="active-theme-"] img[src*="iconset/random/colorized/"][src$="/block.png"] { content: url("/m2theme/icons/block.svg"); }
html[class*="active-theme-"] .dashboard-default-icon img {
  width: 108px;
  height: 108px;
  margin-bottom: 2px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
html[class*="active-theme-"] .react-grid-item:hover .dashboard-default-icon img {
  transform: translateY(-3px) scale(1.04);
}
html[class*="active-theme-"] .dashboard-quick-upload:hover {
  border-color: var(--m2-primary) !important;
  background-color: rgba(85, 200, 232, .10) !important;
}
html[class*="active-theme-"] .dashboard-empty-text,
html[class*="active-theme-"] .no-things-text,
html[class*="active-theme-"] .no-things-text p {
  color: var(--m2-muted) !important;
  font-weight: 600;
}
html[class*="active-theme-"] .react-sidenav .no-things-text,
html[class*="active-theme-"] .react-sidenav .no-things-text p {
  color: #8fb3c7 !important;
}
html[class*="active-theme-"] .react-sidenav .no-things-text p.md-headline {
  font-size: 16px;
}

/* ---------- inputs ---------- */
html[class*="active-theme-"] md-input-container.md-input-focused label,
html[class*="active-theme-"] .MuiFormLabel-root.Mui-focused {
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] md-input-container.md-input-focused .md-input,
html[class*="active-theme-"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .MuiOutlinedInput-root {
  border-radius: 10px !important;
}
html[class*="active-theme-"] md-checkbox.md-checked .md-icon,
html[class*="active-theme-"] .MuiCheckbox-colorPrimary.Mui-checked,
html[class*="active-theme-"] .MuiCheckbox-colorSecondary.Mui-checked {
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] md-checkbox.md-checked .md-icon {
  background-color: var(--m2-dark) !important;
  border-radius: 4px;
}
html[class*="active-theme-"] .MuiSwitch-colorSecondary.Mui-checked,
html[class*="active-theme-"] .MuiSwitch-colorPrimary.Mui-checked {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track,
html[class*="active-theme-"] .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: var(--m2-primary) !important;
}

/* ---------- lists ---------- */
html[class*="active-theme-"] md-content#content .MuiListItem-button:hover,
html[class*="active-theme-"] md-list-item.md-clickable:hover {
  background: rgba(85, 200, 232, .07) !important;
}

/* ---------- app loading screen ---------- */
html[class*="active-theme-"] .appready-overlay {
  background:
    radial-gradient(700px 500px at 50% 42%, rgba(85, 200, 232, .16), transparent 65%),
    linear-gradient(rgba(85, 200, 232, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(85, 200, 232, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(160deg, #05141f 0%, #0a2744 100%) !important;
}
html[class*="active-theme-"] #sk-cube-grid-id {
  position: absolute !important;
  left: 0;
  width: 100%;
  top: 50% !important;
  transform: translateY(-50%);
}
html[class*="active-theme-"] #sk-cube-grid-id .cssloader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
html[class*="active-theme-"] #sk-cube-grid-id .sh1,
html[class*="active-theme-"] #sk-cube-grid-id .sh2 {
  display: none !important;
}
html[class*="active-theme-"] #sk-cube-grid-id .cssloader::before {
  content: "";
  order: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: url("/dist/static/iconset/generated/logo.iconset/icon_256x256.png") center / cover no-repeat;
  animation: m2-pulse 2s ease-in-out infinite;
}
html[data-m2-app="1"] #sk-cube-grid-id .cssloader::before {
  background-image: url("brand/app-mark.png");
}
html[class*="active-theme-"] #sk-cube-grid-id .cssloader::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 116px;
  height: 116px;
  margin-left: -60px;
  border-radius: 50%;
  border: 2px solid rgba(85, 200, 232, .12);
  border-top-color: #55C8E8;
  border-right-color: rgba(85, 200, 232, .5);
  animation: m2-spin 1.1s linear infinite;
}
html[class*="active-theme-"] #sk-cube-grid-id .product-name-loading {
  order: 2;
  margin: 34px 0 0 !important;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 5px !important;
  color: #fff;
}
html[class*="active-theme-"] #sk-cube-grid-id .product-name-loading::after {
  content: "Intelligent Systems .. Solid Business";
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #7fb9d3;
}
html[class*="active-theme-"] #sk-cube-grid-id .lt.app-name {
  order: 3;
  position: relative;
  width: 180px;
  height: 3px;
  margin: 30px auto 0 !important;
  border-radius: 3px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  background: rgba(85, 200, 232, .14);
}
html[class*="active-theme-"] #sk-cube-grid-id .lt.app-name::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 3px;
  background: var(--m2-grad);
  box-shadow: 0 0 12px rgba(85, 200, 232, .7);
  animation: m2-bar 1.4s ease-in-out infinite;
}
@keyframes m2-spin { to { transform: rotate(360deg); } }
@keyframes m2-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85, 200, 232, .35), 0 10px 40px rgba(8, 145, 178, .35); }
  50% { box-shadow: 0 0 0 14px rgba(85, 200, 232, 0), 0 10px 50px rgba(85, 200, 232, .45); }
}
@keyframes m2-bar {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ---------- login screen ---------- */
html[class*="active-theme-"] .vibrant-background-login {
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(85, 200, 232, .22), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(8, 145, 178, .25), transparent 60%),
    linear-gradient(rgba(85, 200, 232, .05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(85, 200, 232, .05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(160deg, #05141f 0%, #0a2744 100%) !important;
}
html[class*="active-theme-"] ng-include.login-screen {
  background: rgba(255, 255, 255, .97) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(85, 200, 232, .15), 0 0 60px rgba(85, 200, 232, .12) !important;
  overflow: hidden;
}
html[class*="active-theme-"] ng-include.login-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--m2-grad);
}
html[class*="active-theme-"] .login-logo img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(85, 200, 232, .12), 0 10px 30px rgba(8, 145, 178, .30);
}
html[class*="active-theme-"] .login-desc .md-display-1 {
  font-weight: 800 !important;
  letter-spacing: 1.5px;
  color: var(--m2-ink) !important;
  margin-top: 14px;
}
html[class*="active-theme-"] .login-desc .md-display-1 + div {
  color: var(--m2-dark);
  font-weight: 600;
  letter-spacing: .4px;
}
html[class*="active-theme-"] .login-form .MuiOutlinedInput-root {
  border-radius: 12px !important;
  background: #f8fbfd;
}
html[class*="active-theme-"] .login-form .MuiOutlinedInput-notchedOutline {
  border-color: #dbe7f0;
}
html[class*="active-theme-"] .login-form .md-button.md-raised.md-primary {
  min-width: 120px;
  height: 42px;
  line-height: 42px;
}
html[class*="active-theme-"] .login-form .md-button:not(.md-raised) {
  color: var(--m2-deep) !important;
}
html[class*="active-theme-"] .app-version {
  display: none !important;
}

/* ---------- dialogs ---------- */
html[class*="active-theme-"] md-backdrop.md-dialog-backdrop,
html[class*="active-theme-"] .md-dialog-backdrop {
  background-color: rgba(5, 20, 31, .55) !important;
}
html[class*="active-theme-"] .md-dialog-container {
  backdrop-filter: blur(3px);
}
html[class*="active-theme-"] md-dialog {
  box-shadow: 0 24px 64px rgba(5, 20, 31, .28) !important;
}

/* ---------- primary palette (replaces stock light-blue) ---------- */
html[class*="active-theme-"] .md-primary-background-color {
  background-color: var(--m2-dark) !important;
  color: #fff !important;
}
html[class*="active-theme-"] .md-primary-color,
html[class*="active-theme-"] .md-button.md-primary:not(.md-raised):not(.md-fab),
html[class*="active-theme-"] .MuiButton-textPrimary,
html[class*="active-theme-"] .MuiTypography-colorPrimary,
html[class*="active-theme-"] md-content#content a:not(.md-button):not(.simple-editor-content a) {
  color: var(--m2-dark);
}
html[class*="active-theme-"] md-content#content .simple-editor-content a {
  color: unset;
}
html[class*="active-theme-"] md-progress-circular path {
  stroke: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-progress-linear .md-container {
  background-color: rgba(85, 200, 232, .18) !important;
}
html[class*="active-theme-"] md-progress-linear .md-bar,
html[class*="active-theme-"] .MuiLinearProgress-barColorPrimary {
  background-color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .MuiCircularProgress-colorPrimary {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-tabs md-ink-bar,
html[class*="active-theme-"] .MuiTabs-indicator {
  background-color: var(--m2-primary) !important;
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-tabs .md-tab.md-active {
  color: var(--m2-dark) !important;
}

/* ---------- avatars ---------- */
html[class*="active-theme-"] .mail-resizer md-icon,
html[class*="active-theme-"] .mail-resizer .material-icons {
  color: var(--m2-icon) !important;
}
html[class*="active-theme-"] .initials.real {
  --m2-av: linear-gradient(135deg, #55C8E8 0%, #0891b2 100%);
  background:
    radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 50%),
    radial-gradient(90% 70% at 85% 100%, rgba(5, 20, 31, .16) 0%, rgba(5, 20, 31, 0) 60%),
    var(--m2-av) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 2px 8px rgba(8, 145, 178, .22);
}
html[class*="active-theme-"] .initials.real[data-m2-tone="1"] { --m2-av: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%); }
html[class*="active-theme-"] .initials.real[data-m2-tone="2"] { --m2-av: linear-gradient(135deg, #67e8f9 0%, #0891b2 55%, #075985 100%); }
html[class*="active-theme-"] .initials.real[data-m2-tone="3"] { --m2-av: linear-gradient(135deg, #5eead4 0%, #0d9488 100%); }
html[class*="active-theme-"] .initials.real[data-m2-tone="4"] { --m2-av: linear-gradient(135deg, #7dd3fc 0%, #2563eb 100%); }
html[class*="active-theme-"] .initials .inner .text {
  font-family: var(--m2-font-display);
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(5, 20, 31, .3);
}
html[class*="active-theme-"] .MuiAvatar-root {
  font-weight: 700;
}

/* =====================================================================
   2026 layer: typography, glass surfaces, focus, overlays, collapsed nav
   ===================================================================== */

/* ---------- typography ---------- */
html[class*="active-theme-"] body,
html[class*="active-theme-"] body *:not(.material-icons):not(.material-icons-outlined):not(md-icon):not(.MuiIcon-root):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="revicon"]):not(.rst__expandButton):not(.rst__collapseButton):not(.rst__moveHandle):not(.rst__loadingHandle):not(.react-multiple-carousel__arrow):not(code):not(pre):not(kbd):not(.mail-html *):not(.note-content *):not(.simple-editor-content *):not(.material-icons *):not(md-icon *):not(.MuiIcon-root *) {
  font-family: var(--m2-font-display) !important;
}
html[class*="active-theme-"] body {
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -.005em;
}
html[class*="active-theme-"] md-content#content md-toolbar h2,
html[class*="active-theme-"] md-content#content md-toolbar h3,
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar) h6,
html[class*="active-theme-"] .react-sidenav h6,
html[class*="active-theme-"] .m2-whead,
html[class*="active-theme-"] md-dialog md-toolbar h2,
html[class*="active-theme-"] md-dialog md-toolbar h3,
html[class*="active-theme-"] .md-headline,
html[class*="active-theme-"] .md-title {
  font-family: var(--m2-font-display) !important;
  letter-spacing: -.01em;
}
html[class*="active-theme-"] md-content#content md-toolbar h2,
html[class*="active-theme-"] md-content#content md-toolbar h3 {
  font-size: 19px;
  font-weight: 700;
}
html[class*="active-theme-"] .product-name-loading,
html[class*="active-theme-"] .login-desc .md-display-1 {
  font-family: var(--m2-font-brand) !important;
  font-weight: 800 !important;
}
html[class*="active-theme-"] .login-desc .md-display-1 {
  font-size: 28px !important;
  letter-spacing: 3px !important;
}

/* ---------- glass top bars ---------- */
html[class*="active-theme-"] header.user-styled-header:not(.notch-toolbar),
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) {
  background: var(--m2-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

/* ---------- collapsed side navigation ---------- */
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-root {
  margin: 3px 8px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 42px;
  justify-content: center;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItemIcon-root {
  min-width: 0 !important;
  margin: 0 !important;
  justify-content: center;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-root:has(> .MuiListItemIcon-root, > .MuiListItemAvatar-root) .MuiListItemText-root:not(:has(.MuiSwitch-root)) {
  display: none !important;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-root:not(:has(> .MuiListItemIcon-root, > .MuiListItemAvatar-root)) .MuiListItemText-root {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  overflow: hidden;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-root:not(:has(> .MuiListItemIcon-root, > .MuiListItemAvatar-root)) .MuiListItemText-root p {
  font-family: var(--m2-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 38px;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItemText-root:has(.MuiSwitch-root) {
  flex: 0 0 auto;
  margin: 0;
  display: flex !important;
  justify-content: center;
  font-size: 0;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItemText-root:has(.MuiSwitch-root) .MuiTypography-root {
  display: flex;
  justify-content: center;
  width: auto !important;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-root.Mui-selected,
html[data-m2-home="1"] .collapsed-condensed [menu-item-type="dashboard"] {
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35);
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-container {
  display: flex;
  justify-content: center;
}
html[class*="active-theme-"] .collapsed-condensed .MuiSwitch-root {
  margin: 0 auto;
}
html[class*="active-theme-"] .collapsed-condensed .profile-toolbar {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- focus & interaction ---------- */
html[class*="active-theme-"] .MuiOutlinedInput-root.Mui-focused,
html[class*="active-theme-"] md-input-container.md-input-focused .md-input {
  box-shadow: var(--m2-ring);
}
html[class*="active-theme-"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-width: 1.5px !important;
}
html[class*="active-theme-"] :focus-visible {
  outline: 2px solid var(--m2-primary);
  outline-offset: 2px;
}
html[class*="active-theme-"] .md-button,
html[class*="active-theme-"] .MuiButtonBase-root,
html[class*="active-theme-"] md-list-item {
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease, transform .12s ease;
}
html[class*="active-theme-"] .md-button.md-raised:active,
html[class*="active-theme-"] .MuiButton-contained:active,
html[class*="active-theme-"] .md-button.md-fab:active {
  transform: scale(.97);
}

/* ---------- content lists (mail, files, contacts, notes, activity) ---------- */
html[class*="active-theme-"] md-content#content md-list-item.md-clickable,
html[class*="active-theme-"] md-content#content .md-list-item-text {
  border-radius: 0;
}
html[class*="active-theme-"] md-content#content md-list-item.selected,
html[class*="active-theme-"] md-content#content md-list-item.md-selected,
html[class*="active-theme-"] md-content#content md-list-item.active {
  background: var(--m2-selected) !important;
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] md-content#content md-list-item.mail-focused {
  background: var(--m2-selected) !important;
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] .ReactVirtualized__Grid md-list-item.md-clickable:not(.mail-focused):not([data-m2-dir]) {
  background-color: transparent !important;
}
/* iOS keeps :hover on the last row a finger touched, so a swipe would leave it tinted */
@media (hover: hover) {
  html[class*="active-theme-"] .ReactVirtualized__Grid md-list-item.md-clickable:not(.mail-focused):not([data-m2-dir]):hover {
    background-color: var(--m2-hover) !important;
  }
}
@media (hover: none) {
  html[class*="active-theme-"] body md-content#content md-list-item.md-clickable:not(.mail-focused):not(.selected):not(.md-selected):not(.active):not([data-m2-dir]):hover {
    background: transparent !important;
  }
}
html[class*="active-theme-"] md-content#content md-list-item h4 {
  color: var(--m2-text);
}
html[class*="active-theme-"] md-content#content md-list-item p,
html[class*="active-theme-"] md-content#content md-list-item .md-list-item-text h4 + h4 {
  color: var(--m2-muted);
}
html[class*="active-theme-"] md-divider,
html[class*="active-theme-"] .MuiDivider-root {
  border-color: var(--m2-border) !important;
}

/* ---------- menus, selects, tooltips, snackbars, chips ---------- */
html[class*="active-theme-"] .MuiPopover-paper,
html[class*="active-theme-"] .MuiMenu-paper,
html[class*="active-theme-"] md-menu-content,
html[class*="active-theme-"] md-select-menu,
html[class*="active-theme-"] md-select-menu md-content {
  background: var(--m2-card) !important;
  color: var(--m2-text) !important;
  border-radius: 14px !important;
}
html[class*="active-theme-"] md-select-menu,
html[class*="active-theme-"] md-menu-content {
  border: 1px solid var(--m2-border);
  box-shadow: 0 16px 48px rgba(5, 20, 31, .18) !important;
}
html[class*="active-theme-"] .MuiMenuItem-root,
html[class*="active-theme-"] md-option,
html[class*="active-theme-"] md-menu-item > .md-button {
  border-radius: 8px;
  margin: 2px 6px;
  min-height: 38px;
}
html[class*="active-theme-"] .MuiMenuItem-root:hover,
html[class*="active-theme-"] md-option:hover,
html[class*="active-theme-"] md-menu-item > .md-button:hover {
  background: var(--m2-hover) !important;
}
html[class*="active-theme-"] .MuiMenuItem-root.Mui-selected,
html[class*="active-theme-"] md-option[selected] {
  background: var(--m2-selected) !important;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .MuiTooltip-tooltip,
html[class*="active-theme-"] md-tooltip .md-content {
  background: rgba(5, 20, 31, .94) !important;
  color: #e5f4fb !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 6px 10px !important;
  box-shadow: 0 8px 24px rgba(5, 20, 31, .25);
}
html[class*="active-theme-"] .MuiSnackbarContent-root,
html[class*="active-theme-"] md-toast .md-toast-content {
  background: linear-gradient(135deg, var(--m2-ink), var(--m2-navy)) !important;
  color: #e5f4fb !important;
  border-radius: 12px !important;
  border: 1px solid rgba(85, 200, 232, .2);
  box-shadow: 0 16px 40px rgba(5, 20, 31, .35) !important;
}
html[class*="active-theme-"] .MuiChip-root,
html[class*="active-theme-"] md-chip {
  border-radius: 999px !important;
  background: var(--m2-light) !important;
  color: var(--m2-deep) !important;
  border: 1px solid rgba(85, 200, 232, .3);
  font-weight: 600;
}
html[class*="active-theme-"] body:not(.light-mode) .MuiChip-root,
html[class*="active-theme-"] body:not(.light-mode) md-chip {
  color: var(--m2-primary) !important;
}

/* ---------- dialogs ---------- */
html[class*="active-theme-"] md-dialog,
html[class*="active-theme-"] .MuiDialog-paper {
  background: var(--m2-card) !important;
  color: var(--m2-text) !important;
  border-radius: 18px !important;
  border: 1px solid var(--m2-border);
  overflow: hidden;
}
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen,
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs {
  transform: none !important;
  animation: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
/* Compose and other "-abs" dialogs float as windows on desktop; only maximized (inline min-width:100%) stays square. */
@media (min-width: 761px) {
  html[class*="active-theme-"]:not([data-m2-tabs="1"]) md-dialog.md-dialog-fullscreen-abs:not([style*="min-width: 100%"]):not(:has(react-component[name="RComponents.FileEditor"])) {
    border-radius: 18px !important;
    box-shadow: var(--m2-shadow) !important;
  }
}
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs:has(react-component[name="RComponents.FileEditor"]) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1 !important;
}
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs:has(react-component[name="RComponents.FileEditor"]) .md-padding:has(textarea) {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  box-sizing: border-box;
}
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs:has(react-component[name="RComponents.FileEditor"]) [class*="MuiTextField-root"]:has(textarea),
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs:has(react-component[name="RComponents.FileEditor"]) [class*="MuiOutlinedInput-root"]:has(textarea) {
  flex: 1 1 auto;
  height: 100%;
  align-items: stretch;
}
html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs:has(react-component[name="RComponents.FileEditor"]) textarea[class*="MuiInputBase-input"] {
  height: 100% !important;
  min-height: calc(100vh - 160px) !important;
  box-sizing: border-box;
}
html[class*="active-theme-"] .MuiBackdrop-root:not(.MuiBackdrop-invisible) {
  background-color: rgba(5, 20, 31, .5) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
html[class*="active-theme-"] md-dialog .md-actions,
html[class*="active-theme-"] md-dialog md-dialog-actions {
  border-top: 1px solid var(--m2-border);
}

/* ---------- dark mode surfaces ---------- */
html[class*="active-theme-"] body:not(.light-mode) md-content#content,
html[class*="active-theme-"] body:not(.light-mode) md-content#content > div,
html[class*="active-theme-"] body:not(.light-mode) .template-layout {
  background-color: var(--m2-bg) !important;
}
html[class*="active-theme-"] .backdropcircle.md-primary,
html[class*="active-theme-"] .MuiMobileStepper-dotActive {
  background-color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .MuiCheckbox-colorPrimary.Mui-checked,
html[class*="active-theme-"] .MuiCheckbox-colorPrimary.Mui-checked .MuiIconButton-label,
html[class*="active-theme-"] .ReactVirtualized__Grid .MuiCheckbox-colorPrimary,
html[class*="active-theme-"] .MuiSlider-colorPrimary,
html[class*="active-theme-"] .primary-color {
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .MuiCheckbox-colorPrimary.Mui-checked,
html[class*="active-theme-"] body:not(.light-mode) .MuiCheckbox-colorPrimary.Mui-checked .MuiIconButton-label,
html[class*="active-theme-"] body:not(.light-mode) .MuiSlider-colorPrimary,
html[class*="active-theme-"] body:not(.light-mode) .primary-color {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .rst__rowContents {
  border-color: var(--m2-border) !important;
  border-radius: 0 10px 10px 0;
}
html[class*="active-theme-"] body:not(.light-mode) .rst__rowContents {
  background-color: var(--m2-card) !important;
}
html[class*="active-theme-"] .rst__collapseButton,
html[class*="active-theme-"] .rst__expandButton {
  background-color: var(--m2-card) !important;
  box-shadow: 0 0 0 1px var(--m2-primary) !important;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .rst__collapseButton,
html[class*="active-theme-"] body:not(.light-mode) .rst__expandButton {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .ReactVirtualized__Grid md-list-item:not(.mail-focused):not([data-m2-dir]) {
  background-color: transparent !important;
}
html[class*="active-theme-"] body:not(.light-mode) .mail-reply md-list-item {
  background-color: var(--m2-card) !important;
}
html[class*="active-theme-"] md-content#content md-content {
  background-color: transparent !important;
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content md-list-item.large-flippy {
  background-color: var(--m2-card) !important;
  border-bottom: 1px solid var(--m2-border);
}
html[class*="active-theme-"] body:not(.light-mode) .MuiPaper-root:not(.react-sidenav):not(.MuiAppBar-root):not(.MuiSnackbarContent-root):not(.MuiTooltip-tooltip) {
  background-color: var(--m2-card) !important;
  color: var(--m2-text);
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content md-list-item.md-clickable:hover {
  background: var(--m2-hover) !important;
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content form.login-form.minimize-padding .MuiOutlinedInput-root,
html[class*="active-theme-"] body:not(.light-mode) .login-form .MuiOutlinedInput-root {
  background: rgba(255, 255, 255, .03);
}
html[class*="active-theme-"] body:not(.light-mode) .MuiOutlinedInput-notchedOutline {
  border-color: var(--m2-border) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .dashboard-quick-upload {
  border-color: rgba(85, 200, 232, .3) !important;
  background-color: rgba(85, 200, 232, .04) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .react-grid-item .MuiListItem-root,
html[class*="active-theme-"] body:not(.light-mode) .react-grid-item md-list-item {
  background-color: transparent !important;
}
html[class*="active-theme-"] body:not(.light-mode) .react-grid-item .MuiListItem-root:hover {
  background-color: var(--m2-hover) !important;
}
html[class*="active-theme-"] body:not(.light-mode) ng-include.login-screen {
  background: rgba(12, 31, 48, .92) !important;
  border-color: rgba(85, 200, 232, .18);
}
html[class*="active-theme-"] body:not(.light-mode) .login-desc .md-display-1 {
  color: #fff !important;
}
html[class*="active-theme-"] body:not(.light-mode) .login-desc .md-display-1 + div {
  color: var(--m2-primary);
}
html[class*="active-theme-"] body:not(.light-mode) .login-form .MuiOutlinedInput-root {
  background: rgba(255, 255, 255, .04);
}

/* ---------- rich text editor (compose, signatures, notes) ---------- */
html[class*="active-theme-"] .ql-toolbar.ql-snow {
  background: #f6fafc !important;
  border: 0 !important;
  border-top: 1px solid var(--m2-border) !important;
  border-bottom: 1px solid var(--m2-border) !important;
  padding: 6px 8px !important;
}
html[class*="active-theme-"] body:not(.light-mode) .ql-toolbar.ql-snow {
  background: rgba(255, 255, 255, .03) !important;
}
html[class*="active-theme-"] .ql-toolbar.ql-snow .md-button {
  border-radius: 8px !important;
  min-height: 32px;
}
html[class*="active-theme-"] .ql-toolbar.ql-snow .md-button:hover,
html[class*="active-theme-"] .ql-toolbar.ql-snow .md-button.ql-active {
  background: var(--m2-hover) !important;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .ql-container.ql-snow {
  border: 0 !important;
}
html[class*="active-theme-"] .ql-editor.ql-blank::before {
  color: var(--m2-muted) !important;
  font-style: normal !important;
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] *,
  html[class*="active-theme-"] *::before,
  html[class*="active-theme-"] *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- side navigation: brand row ---------- */
html[class*="active-theme-"] .react-sidenav header.notch-toolbar::before {
  content: "";
  display: block;
  flex: none;
  height: 64px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(85, 200, 232, .12);
  background: url("/m2theme/brand/box-white.svg") no-repeat 16px center / auto 44px;
}
html[dir="rtl"] .react-sidenav header.notch-toolbar::before,
body[dir="rtl"] .react-sidenav header.notch-toolbar::before {
  background-position: right 20px center;
}
html[class*="active-theme-"] .collapsed-condensed header.notch-toolbar::before {
  background: url("/m2theme/brand/box-icon.svg?v=2") no-repeat center / 32px 32px;
}

/* ---------- side navigation: storage card ---------- */
html[class*="active-theme-"] .react-sidenav .m2-storage {
  margin: 10px 12px 14px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(85, 200, 232, .10) 0%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(85, 200, 232, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
html[class*="active-theme-"] .react-sidenav .m2-storage > .md-padding {
  padding: 0 !important;
}
html[class*="active-theme-"] .react-sidenav .m2-storage .disk-usage-label.text-center {
  display: flex;
  align-items: center;
  text-align: start;
  font-size: 0 !important;
  line-height: 20px;
}
html[class*="active-theme-"] .react-sidenav .m2-storage .disk-usage-label.text-center[data-m2-label]::before {
  content: attr(data-m2-label);
  padding-inline-start: 28px;
  font-size: 13.5px;
  font-weight: 600;
  color: #e6f4fa;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355C8E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.6 9.1 4.75 4.75 0 0 0 7 18.5z'/%3E%3C/svg%3E") no-repeat left center / 20px 20px;
}
html[dir="rtl"] .react-sidenav .m2-storage .disk-usage-label.text-center[data-m2-label]::before,
body[dir="rtl"] .react-sidenav .m2-storage .disk-usage-label.text-center[data-m2-label]::before {
  background-position: right center;
}
html[class*="active-theme-"] .react-sidenav .m2-storage .disk-usage-label.text-center[data-m2-pct]::after {
  content: attr(data-m2-pct);
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: #05141f;
  background: var(--m2-primary);
  border-radius: 20px;
  padding: 0 8px;
  line-height: 18px;
}
html[class*="active-theme-"] .react-sidenav .m2-storage [data-m2-usage] > div:not(.disk-usage-label) {
  margin-top: 10px;
}
html[class*="active-theme-"] .react-sidenav .m2-storage .MuiLinearProgress-root {
  height: 6px;
  border-radius: 6px;
}
html[class*="active-theme-"] .react-sidenav .m2-storage [data-m2-usage]::after {
  content: attr(data-m2-usage);
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: #8fb3c7;
  direction: ltr;
  text-align: start;
}
html[class*="active-theme-"] .react-sidenav .m2-storage > .md-padding + .md-padding {
  margin-top: 12px;
  padding-top: 10px !important;
  border-top: 1px dashed rgba(85, 200, 232, .18);
}
html[class*="active-theme-"] .react-sidenav .m2-storage > .md-padding + .md-padding .disk-usage-label {
  font-size: 11.5px !important;
  line-height: 1.7;
}
html[class*="active-theme-"] .react-sidenav .m2-storage .disk-usage-label > span[data-m2-label] {
  font-size: 0;
  letter-spacing: 0;
}
html[class*="active-theme-"] .react-sidenav .m2-storage .disk-usage-label > span[data-m2-label]::before {
  content: attr(data-m2-label);
  font-size: 11.5px;
  letter-spacing: .02em;
}
html[class*="active-theme-"] .react-sidenav .m2-storage > .md-padding + .md-padding b {
  color: #e6f4fa;
  font-weight: 700;
}
html[class*="active-theme-"] .collapsed-condensed .m2-storage {
  margin: 10px 8px;
  padding: 10px 8px;
}
html[class*="active-theme-"] .collapsed-condensed .m2-storage .disk-usage-label.text-center {
  justify-content: center;
}
html[class*="active-theme-"] .collapsed-condensed .m2-storage .disk-usage-label.text-center[data-m2-label]::before {
  content: "";
  width: 20px;
  height: 20px;
  padding: 0;
  background-position: center;
}
html[class*="active-theme-"] .collapsed-condensed .m2-storage .disk-usage-label.text-center[data-m2-pct]::after,
html[class*="active-theme-"] .collapsed-condensed .m2-storage [data-m2-usage]::after,
html[class*="active-theme-"] .collapsed-condensed .m2-storage > .md-padding + .md-padding {
  display: none;
}

/* ---------- thread: collapsed replies expander ---------- */
html[class*="active-theme-"] md-list-item.load-more-mails .fakeclick {
  height: 1px !important;
  top: 1px !important;
  background: linear-gradient(90deg, rgba(85, 200, 232, 0) 0%, rgba(85, 200, 232, .55) 12%, rgba(8, 145, 178, .35) 60%, rgba(85, 200, 232, 0) 100%) !important;
  transition: background .2s ease, height .2s ease;
}
html[class*="active-theme-"] md-list-item.load-more-mails:hover .fakeclick {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(85, 200, 232, 0) 0%, var(--m2-primary) 12%, #0891b2 60%, rgba(85, 200, 232, 0) 100%) !important;
}
html[class*="active-theme-"] md-list-item.load-more-mails .circle-number {
  background: var(--m2-card, #fff) !important;
  border: 1.5px solid var(--m2-primary) !important;
  color: var(--m2-dark) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px -4px rgba(8, 145, 178, .45), 0 0 0 4px var(--m2-bg, #f4f8fb);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
html[class*="active-theme-"] md-list-item.load-more-mails:hover .circle-number {
  background: var(--m2-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  transform: scale(1.08);
}
html[class*="active-theme-"] body:not(.light-mode) md-list-item.load-more-mails .circle-number {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] body:not(.light-mode) md-list-item.load-more-mails:hover .circle-number {
  color: #fff !important;
}
@keyframes m2-expander-pulse {
  0% { box-shadow: 0 4px 12px -4px rgba(8, 145, 178, .45), 0 0 0 4px var(--m2-bg), 0 0 0 4px rgba(85, 200, 232, .6); }
  70%, 100% { box-shadow: 0 4px 12px -4px rgba(8, 145, 178, .45), 0 0 0 4px var(--m2-bg), 0 0 0 16px rgba(85, 200, 232, 0); }
}
html[class*="active-theme-"] md-list-item.load-more-mails .circle-number {
  animation: m2-expander-pulse 2.4s cubic-bezier(.2, .7, .3, 1) infinite;
}
html[class*="active-theme-"] md-list-item.load-more-mails:hover .circle-number {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] md-list-item.load-more-mails .circle-number { animation: none; }
}

/* ---------- no-things illustrations (fixures/empty-icons) ---------- */
html[class*="active-theme-"] img[src*="fixures/empty-icons/"] {
  width: 300px !important;
  max-width: 82% !important;
  height: auto !important;
  filter: none !important;
  opacity: 1 !important;
}
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/400.png"] { content: url("/m2theme/icons/empty-400.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/404.png"] { content: url("/m2theme/icons/empty-404.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/500.png"] { content: url("/m2theme/icons/empty-500.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/503.png"] { content: url("/m2theme/icons/empty-503.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/block.png"] { content: url("/m2theme/icons/empty-block.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/branding.png"] { content: url("/m2theme/icons/empty-branding.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/canned.png"] { content: url("/m2theme/icons/empty-canned.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/chat.png"] { content: url("/m2theme/icons/empty-chat.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/contact.png"] { content: url("/m2theme/icons/empty-contact.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/filter.png"] { content: url("/m2theme/icons/empty-filter.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/mail.png"] { content: url("/m2theme/icons/empty-mail.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/media.png"] { content: url("/m2theme/icons/empty-media.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/note.png"] { content: url("/m2theme/icons/empty-note.svg"); }
html[class*="active-theme-"] img[src*="fixures/empty-icons/"][src$="/reminder.png"] { content: url("/m2theme/icons/empty-reminder.svg"); }
html[class*="active-theme-"] .no-things-text {
  font-family: var(--m2-font-display) !important;
}

/* Compose, reply, and forward: From, then To, then Subject. */
html[class*="active-theme-"] .reply-box .above-editor-container {
  display: flex;
  flex-direction: column;
}
html[class*="active-theme-"] .reply-box .above-editor-container > react-component:has(input[name="accounts.selected"]) {
  order: 1;
}
html[class*="active-theme-"] .reply-box .above-editor-container > .narrow-margin {
  order: 2;
}
html[class*="active-theme-"] .reply-box .above-editor-container > react-component:has(input[name="message.subject"]) {
  order: 3;
}

/* ---------- compose: send split button ---------- */
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] {
  position: relative;
  display: inline-flex;
  margin-inline-start: 14px;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-root {
  border-radius: 14px;
  box-shadow: none !important;
  animation: m2-send-pulse 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped,
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:hover,
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:active {
  height: 40px !important;
  min-height: 40px !important;
  transform: none !important;
}
@keyframes m2-send-pulse {
  0% { box-shadow: 0 6px 18px -6px rgba(8, 145, 178, .7), 0 0 0 0 rgba(85, 200, 232, .55); }
  70%, 100% { box-shadow: 0 6px 18px -6px rgba(8, 145, 178, .7), 0 0 0 12px rgba(85, 200, 232, 0); }
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped {
  height: 40px;
  box-shadow: none !important;
  border: 0 !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:first-child {
  border-radius: 0 !important;
  border-start-start-radius: 14px !important;
  border-end-start-radius: 14px !important;
  padding: 0 18px 0 16px;
  gap: 8px;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:first-child[title]::after {
  content: attr(title);
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:first-child[data-m2-label]::after {
  content: attr(data-m2-label);
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:first-child[title]::after,
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:first-child[data-m2-label]::after {
  display: inline;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:first-child .material-icons {
  font-size: 19px;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:last-child:not(:first-child) {
  border-radius: 0 !important;
  border-start-end-radius: 14px !important;
  border-end-end-radius: 14px !important;
  min-width: 34px !important;
  padding: 0 4px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3) !important;
}
html[dir="rtl"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:last-child:not(:first-child),
body[dir="rtl"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:last-child:not(:first-child) {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .3) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-grouped:hover {
  filter: brightness(1.08);
}
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-root { animation: none; }
}

/* split menu (schedule send): anchor to the button's end edge so it stays inside the dialog */
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] [x-placement] {
  transform: none !important;
  top: calc(100% + 8px) !important;
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  z-index: 20;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] [x-placement] .MuiPaper-root {
  border-radius: 14px !important;
  overflow: hidden;
  min-width: 210px;
  background: var(--m2-card) !important;
  border: 1px solid var(--m2-border);
  box-shadow: 0 18px 40px -14px rgba(5, 20, 31, .35) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] [x-placement] .MuiMenuItem-root {
  gap: 10px;
  margin: 4px 6px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] [x-placement] .MuiMenuItem-root:hover {
  background: rgba(85, 200, 232, .12) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] [x-placement] .material-icons {
  color: #0891b2 !important;
}

/* ---------- dialog toolbar: text actions (Select, Save...) ---------- */
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-button:not(.md-icon-button):not(.dialog-control):not(.m2-vox-call):not(.m2-thread-vox) {
  background: var(--m2-grad) !important;
  color: #fff !important;
  border-radius: 12px !important;
  min-height: 38px;
  line-height: 38px;
  padding: 0 20px;
  margin-inline-start: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px -6px rgba(85, 200, 232, .7) !important;
  transition: filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-button:not(.md-icon-button):not(.dialog-control):not(.m2-vox-call):not(.m2-thread-vox):not([disabled]):hover {
  filter: brightness(1.08);
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-button:not(.md-icon-button):not(.dialog-control):not(.m2-vox-call):not(.m2-thread-vox)[disabled] {
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(255, 255, 255, .5) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-icon-button[ngf-select] {
  border-radius: 12px !important;
  background: rgba(85, 200, 232, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35);
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 8px;
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-icon-button[ngf-select]::before,
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-icon-button[ngf-select]::after {
  content: none;
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-icon-button[ngf-select] md-icon {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .md-icon-button[ngf-select]:hover {
  background: rgba(85, 200, 232, .24) !important;
}

/* ---------- file browser breadcrumbs ---------- */
html[class*="active-theme-"] .md-button.crumbnavi {
  background: rgba(85, 200, 232, .12) !important;
  color: var(--m2-dark) !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  font-weight: 600;
  text-transform: none;
  padding: 0 14px;
}
html[class*="active-theme-"] .md-button.crumbnavi:not([disabled]):hover {
  background: rgba(85, 200, 232, .22) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .md-button.crumbnavi {
  color: var(--m2-primary) !important;
}

/* ---------- compose: attachments drop zone ---------- */
html[class*="active-theme-"] .dotted-dropzone {
  border: 1.5px dashed rgba(8, 145, 178, .35) !important;
  border-radius: 14px !important;
  background: rgba(85, 200, 232, .05) !important;
  padding: 12px 16px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  transition: border-color .2s ease, background .2s ease;
}
html[class*="active-theme-"] .dotted-dropzone .md-body-1 {
  color: var(--m2-muted) !important;
  margin: 0 !important;
}
html[class*="active-theme-"] .dotted-dropzone > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--m2-muted);
  font-size: 12px;
}
html[class*="active-theme-"] .dotted-dropzone .md-button {
  margin: 0 !important;
  min-height: 32px;
  line-height: 32px;
  padding: 0 14px;
  border-radius: 10px !important;
  background: var(--m2-card) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .35) !important;
  color: var(--m2-dark) !important;
  font-weight: 600;
  text-transform: none;
}
html[class*="active-theme-"] .dotted-dropzone .md-button:hover {
  background: rgba(85, 200, 232, .14) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .dotted-dropzone .md-button {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .dotted-dropzone.accept-new-drag-drop-file {
  border-style: solid !important;
  border-color: var(--m2-primary) !important;
  background: rgba(85, 200, 232, .14) !important;
}
html[class*="active-theme-"] .dotted-dropzone.reject-new-drag-drop-file {
  border-color: #e11d48 !important;
  background: rgba(225, 29, 72, .06) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ButtonWithDropdown"] [x-placement] .MuiListItemIcon-root {
  min-width: 0 !important;
}
html[class*="active-theme-"] .MuiSelect-nativeInput {
  box-sizing: border-box !important;
}

/* ---------- settings: sessions ---------- */
html[class*="active-theme-"] .m2-sessions-head {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t b" "s b";
  align-items: center;
  gap: 2px 18px;
  padding: 20px 22px 18px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--m2-border);
}
html[class*="active-theme-"] .m2-sessions-head > span,
html[class*="active-theme-"] .m2-sessions-head > br {
  display: none !important;
}
html[class*="active-theme-"] .m2-sessions-head::before {
  content: attr(data-m2-title);
  grid-area: t;
  font-family: var(--m2-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-sessions-head::after {
  content: attr(data-m2-sub);
  grid-area: s;
  font-size: 13px;
  line-height: 20px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-sessions-head > button.md-button.md-raised[ng-click="deleteAllSessions()"] {
  grid-area: b;
  margin: 0 !important;
  min-height: 38px;
  line-height: 38px;
  padding: 0 18px 0 14px;
  border-radius: 12px !important;
  background: rgba(225, 29, 72, .07) !important;
  color: #e11d48 !important;
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .3) !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s ease, color .2s ease;
}
html[class*="active-theme-"] .m2-sessions-head > button.md-button.md-raised[ng-click="deleteAllSessions()"]::before {
  content: "logout";
  font-family: "Material Icons";
  font-size: 18px;
  font-weight: normal;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}
html[class*="active-theme-"] .m2-sessions-head > button.md-button.md-raised[ng-click="deleteAllSessions()"]:hover {
  background: #e11d48 !important;
  color: #fff !important;
}

/* Trusted senders, painted at the top of Settings > Sessions. */
html[class*="active-theme-"] .m2-trust-card {
  margin: 4px 4px 14px;
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--m2-border);
}
html[class*="active-theme-"] .m2-trust-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
html[class*="active-theme-"] .m2-trust-head > .material-icons {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--m2-hover);
  color: var(--m2-primary);
  font-size: 19px;
}
html[class*="active-theme-"] .m2-trust-head h3 {
  margin: 0;
  font-family: var(--m2-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-trust-head p {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
html[class*="active-theme-"] .m2-trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  border-top: 1px solid var(--m2-border);
}
html[class*="active-theme-"] .m2-trust-addr {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m2-text);
  font-size: 14px;
}
html[class*="active-theme-"] .m2-trust-date {
  flex: none;
  color: var(--m2-muted);
  font-size: 13px;
}
html[class*="active-theme-"] .m2-trust-x {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  font: 700 13px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-trust-x:hover {
  background: var(--m2-hover);
}
html[class*="active-theme-"] .m2-trust-card .m2-empty-cta {
  align-items: flex-start;
  text-align: start;
  margin: 8px 0 12px;
}
html[class*="active-theme-"] .m2-trust-card .m2-empty-cta p {
  max-width: 520px;
}
@media (max-width: 600px) {
  html[class*="active-theme-"] .m2-sessions-head {
    grid-template-columns: 1fr;
    grid-template-areas: "t" "s" "b";
  }
  html[class*="active-theme-"] .m2-sessions-head > button.md-button.md-raised[ng-click="deleteAllSessions()"] {
    justify-self: start;
    margin-top: 10px !important;
  }
}

html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 14px;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) md-list-item {
  background: var(--m2-card) !important;
  border: 1px solid var(--m2-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) md-list-item:hover {
  border-color: rgba(85, 200, 232, .55) !important;
  box-shadow: 0 8px 22px -14px rgba(8, 145, 178, .45);
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) md-list-item:first-child {
  border-color: rgba(85, 200, 232, .55) !important;
  background: linear-gradient(135deg, rgba(85, 200, 232, .08), transparent 60%), var(--m2-card) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) .imitation-md-button {
  height: auto !important;
  min-height: 76px;
  padding: 12px 16px !important;
  gap: 14px;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) flippy {
  flex: none !important;
  width: 44px;
  height: 44px !important;
  border-radius: 14px;
  background: rgba(85, 200, 232, .14);
  display: flex;
  align-items: center;
  justify-content: center;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) flippy md-icon.mediator {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  width: 24px;
  height: 24px;
  min-width: 24px;
  line-height: 24px;
  color: #0891b2 !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) flippy md-icon.mediator::before {
  content: "devices";
  font-size: 22px;
}
html[class*="active-theme-"] body:not(.light-mode) react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) flippy md-icon.mediator {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"], [name="RComponents.NotificationDevicesList"]) h4.mainf {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--m2-text) !important;
}
html[data-m2-app="1"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"], [name="RComponents.NotificationDevicesList"]) h4.mainf {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-inline-end: 76px;
  max-width: 100%;
}
html[data-m2-app="1"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"], [name="RComponents.NotificationDevicesList"]) h4.mainf .m2-auth-inline {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  margin: 0;
}
html[data-m2-app="1"] body:not(.light-mode) react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"], [name="RComponents.NotificationDevicesList"]) md-list-item,
html[data-m2-app="1"] body:not(.light-mode) react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"], [name="RComponents.NotificationDevicesList"]) md-list-item .md-list-item-text {
  background: var(--m2-card) !important;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) h4.lighter {
  font-size: 12px !important;
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) p .primary-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  padding: 1px 9px 1px 7px;
  border-radius: 20px;
  background: rgba(16, 185, 129, .12);
  color: #059669 !important;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
}
html[class*="active-theme-"] react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) p .primary-color::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2);
}
html[class*="active-theme-"] body:not(.light-mode) react-component:is([name="RComponents.SessionsList"], [name="RComponents.DevicesList"]) p .primary-color {
  color: #34d399 !important;
}

/* ---------- compose: rich editor focus (single bottom line, no outline ring) ---------- */
html[class*="active-theme-"] .ql-editor,
html[class*="active-theme-"] .ql-editor:focus,
html[class*="active-theme-"] .ql-editor:focus-visible {
  outline: none !important;
  border-bottom: 1px solid var(--m2-border) !important;
  transition: border-color .2s ease;
}
html[class*="active-theme-"] .ql-editor:focus {
  border-bottom-color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .ql-editor {
  line-height: 1.55;
}
html[class*="active-theme-"] .ql-editor p {
  margin: 0 0 0.45em;
}
/* Forwarded / pasted HTML must stay in normal blocks. Word styles use absolute
   positioning and zero line-height, which stacks lines on top of each other. */
html[class*="active-theme-"] .ql-editor .ql-embeded-html,
html[class*="active-theme-"] .ql-editor .ql-embeded-html div,
html[class*="active-theme-"] .ql-editor .ql-embeded-html p {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  line-height: 1.55 !important;
  text-indent: 0 !important;
  max-width: 100%;
  white-space: pre-wrap;
}
html[class*="active-theme-"] .ql-editor .ql-embeded-html span,
html[class*="active-theme-"] .ql-editor .ql-embeded-html font {
  position: static !important;
  float: none !important;
  line-height: inherit !important;
}

/* ---------- mail view: "show quoted text" toggle ---------- */
html[class*="active-theme-"] .render-mail-html .material-icons.primary-color-contrast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 22px;
  margin: 6px 0;
  border-radius: 12px;
  background: rgba(85, 200, 232, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35);
  color: #0891b2 !important;
  font-size: 20px;
  line-height: 22px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
html[class*="active-theme-"] .render-mail-html .material-icons.primary-color-contrast:hover {
  background: var(--m2-grad) !important;
  box-shadow: none;
  color: #fff !important;
}
html[class*="active-theme-"] body:not(.light-mode) .render-mail-html .material-icons.primary-color-contrast {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .primary-color-contrast:not(.render-mail-html .primary-color-contrast) {
  background-color: var(--m2-dark) !important;
}

/* ---------- dialog window controls (close / maximize / minimize) ---------- */
html[class*="active-theme-"] md-dialog md-toolbar .dialog-controls-holder {
  gap: 2px;
  margin-inline-end: 10px;
  padding-inline-end: 10px;
  border-inline-end: 1px solid rgba(255, 255, 255, .12);
}
html[class*="active-theme-"] md-dialog md-toolbar .dialog-controls-holder .md-icon-button.dialog-control {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0 !important;
  padding: 6px;
  border-radius: 10px !important;
  transition: background .18s ease;
}
html[class*="active-theme-"] md-dialog md-toolbar .dialog-controls-holder .md-icon-button.dialog-control md-icon {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 20px;
  transition: color .18s ease;
}
html[class*="active-theme-"] md-dialog md-toolbar .dialog-controls-holder .md-icon-button.dialog-control:hover {
  background: rgba(255, 255, 255, .1) !important;
}
html[class*="active-theme-"] md-dialog md-toolbar .dialog-controls-holder .md-icon-button.dialog-control:hover md-icon {
  color: #fff !important;
}
html[class*="active-theme-"] md-dialog md-toolbar .dialog-controls-holder .md-icon-button.dialog-control[ng-click="close()"]:hover {
  background: rgba(225, 29, 72, .9) !important;
}

/* ---------- chat: sidebar panel ---------- */
html[class*="active-theme-"] .react-sidenav .MuiTabs-root {
  margin: 4px 12px 6px;
  min-height: 40px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
html[class*="active-theme-"] .react-sidenav .MuiTabs-root .MuiTab-root {
  min-width: 0;
  min-height: 32px;
  border-radius: 9px;
  font-family: var(--m2-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(207, 227, 239, .7);
  transition: background .2s ease, color .2s ease;
}
html[class*="active-theme-"] .react-sidenav .MuiTabs-root .MuiTab-root:hover {
  color: #fff;
  background: rgba(255, 255, 255, .05);
}
html[class*="active-theme-"] .react-sidenav .MuiTabs-root .MuiTab-root.Mui-selected {
  color: #fff;
  background: linear-gradient(135deg, rgba(85, 200, 232, .32), rgba(8, 145, 178, .32));
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35);
}
html[class*="active-theme-"] .react-sidenav .MuiTabs-root .MuiTabs-indicator { display: none; }
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item {
  margin: 2px 10px;
  border-radius: 12px;
  transition: background .2s ease;
}
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item:hover {
  background: rgba(255, 255, 255, .06);
}
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item md-divider { display: none; }
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item .md-list-item-text h4.highlightable {
  color: #fff;
  font-weight: 600;
}
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item .md-list-item-text h4.lighter,
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item .md-list-item-text p {
  color: rgba(207, 227, 239, .6) !important;
}
html[class*="active-theme-"] .react-sidenav .chat-tabs .layout-align-center-center {
  color: rgba(207, 227, 239, .75);
  font-size: 13px;
  text-align: center;
}
html[class*="active-theme-"] .react-sidenav md-fab-speed-dial md-fab-actions .md-button.md-fab {
  width: 44px;
  height: 44px;
  min-width: 0;
  line-height: 44px;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .25) !important;
}
html[class*="active-theme-"] .react-sidenav md-fab-speed-dial md-fab-actions .md-button.md-fab:hover {
  background: var(--m2-grad) !important;
}

/* ---------- chat: conversation ---------- */
html[class*="active-theme-"] .chat-container > md-content {
  background: var(--m2-bg) !important;
}
html[class*="active-theme-"] .chat-container .chat-list md-list-item {
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 6px;
}
html[class*="active-theme-"] .chat-container .chat-list md-list-item > .md-avatar {
  margin-top: 4px;
}
html[class*="active-theme-"] .chat-container .chat-list .md-list-item-text > h4 {
  padding-top: 4px !important;
  margin-bottom: 4px;
  font-family: var(--m2-font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] .chat-container .chat-list .chat-date {
  font-family: var(--m2-font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 6px !important;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: normal;
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body > span {
  max-width: min(78%, 680px);
  padding: 8px 14px;
  border-radius: 6px 16px 16px 16px;
  background: var(--m2-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 0 0 1px var(--m2-border);
  color: var(--m2-text);
  unicode-bidi: plaintext;
  text-align: start;
  overflow-wrap: anywhere;
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body > span + span {
  border-radius: 16px;
}
html[class*="active-theme-"] [dir="rtl"] .chat-container .chat-list h3.chat-body > span:first-child,
html[class*="active-theme-"][dir="rtl"] .chat-container .chat-list h3.chat-body > span:first-child {
  border-radius: 16px 6px 16px 16px;
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body a {
  color: var(--m2-dark);
  font-weight: 600;
}
html[class*="active-theme-"] .chat-container .layout-padding > p.md-body-2 {
  margin: 48px auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(85, 200, 232, .1);
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .25);
  color: var(--m2-dark);
  font-size: 13px;
  font-weight: 500;
}
html[class*="active-theme-"] .chat-container .layout-padding > p.md-body-2::before {
  content: "forum";
  margin-inline-end: 8px;
  font-family: "Material Icons";
  font-size: 18px;
  vertical-align: -4px;
}
html[class*="active-theme-"] .chat-container .chat-typing {
  color: var(--m2-muted);
  font-style: italic;
}

/* ---------- chat: participants bar ---------- */
html[class*="active-theme-"] .chat-container md-toolbar.user-bar,
html[class*="active-theme-"] md-dialog md-toolbar.user-bar {
  background: linear-gradient(180deg, #0a2236 0%, #081a29 100%) !important;
  border-bottom: 1px solid rgba(85, 200, 232, .14);
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant {
  padding-top: 4px;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant .name {
  margin-top: 2px;
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  text-align: center;
}
html[class*="active-theme-"] md-toolbar.user-bar .toggler {
  top: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%);
}
html[class*="active-theme-"] md-toolbar.user-bar .toggler .md-icon-button {
  width: 44px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 20px;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, .08);
}
html[class*="active-theme-"] md-toolbar.user-bar .toggler .md-icon-button md-icon {
  min-height: 20px;
  height: 20px;
  line-height: 20px;
  color: rgba(255, 255, 255, .75);
}

/* ---------- chat: toolbar search ---------- */
html[class*="active-theme-"] md-dialog md-toolbar .MuiInputBase-root,
html[class*="active-theme-"] .chat-container md-toolbar .MuiInputBase-root {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #fff;
}
html[class*="active-theme-"] md-dialog md-toolbar .MuiInputBase-root::before,
html[class*="active-theme-"] md-dialog md-toolbar .MuiInputBase-root::after {
  display: none;
}

/* ---------- chat: composer ---------- */
html[class*="active-theme-"] .chat-footer {
  padding: 6px 12px !important;
  background: var(--m2-card) !important;
  border-top: 1px solid var(--m2-border);
}
html[class*="active-theme-"] .chat-footer .MuiInputBase-root {
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--m2-bg);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  transition: box-shadow .2s ease, background .2s ease;
}
html[class*="active-theme-"] .chat-footer .MuiInputBase-root.Mui-focused {
  background: var(--m2-card);
  box-shadow: inset 0 0 0 1.5px var(--m2-primary), var(--m2-ring);
}
html[class*="active-theme-"] .chat-footer .MuiInput-underline::before,
html[class*="active-theme-"] .chat-footer .MuiInput-underline::after {
  display: none;
}
html[class*="active-theme-"] .chat-footer textarea {
  font-size: 14.5px;
  line-height: 1.5;
  unicode-bidi: plaintext;
}
html[class*="active-theme-"] .chat-footer .smile-chat-bottom .MuiIconButton-root .material-icons {
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .chat-footer .MuiIconButton-colorPrimary {
  width: 42px;
  height: 42px;
  margin-inline-start: 8px;
  padding: 0;
  border-radius: 13px;
  background: var(--m2-grad);
  box-shadow: 0 6px 16px rgba(8, 145, 178, .3);
  color: #fff !important;
  transition: transform .15s ease, box-shadow .2s ease;
}
html[class*="active-theme-"] .chat-footer .MuiIconButton-colorPrimary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(8, 145, 178, .38);
}
html[class*="active-theme-"] .chat-footer .MuiIconButton-colorPrimary .material-icons {
  color: #fff !important;
  font-size: 20px;
}
html[class*="active-theme-"][dir="rtl"] .chat-footer .MuiIconButton-colorPrimary .material-icons {
  transform: scaleX(-1);
}

/* ---------- chat: new channel / conversation form ---------- */
@media (min-width: 761px) {
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs:has([recent="chat_compose"]) {
    width: 560px !important;
    max-width: 92vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(760px, 92vh) !important;
  }
  html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) md-dialog-content {
    flex: 0 1 auto !important;
  }
}
html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) .md-dialog-content-body > .md-padding {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 24px 22px !important;
}
html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) .md-dialog-content-body > .md-padding > * {
  margin: 0 !important;
  padding-bottom: 0 !important;
}
html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) .md-dialog-content-body > .md-padding > * > div {
  padding-bottom: 0 !important;
}
html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) .md-input-container-margin > .relative > br {
  display: none;
}
html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) .md-input-container-margin .md-caption[translate="PARTICIPANTS"] {
  margin: 0 0 6px;
  color: var(--m2-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
html[class*="active-theme-"] md-dialog:has([recent="chat_compose"]) .MuiInputBase-multiline textarea {
  min-height: 72px;
}
html[class*="active-theme-"] .md-input-container-margin:has(.help-under-select) > div > .md-caption:first-child {
  margin: 4px 0 6px;
  color: var(--m2-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
html[class*="active-theme-"] .md-input-container-margin:has(.help-under-select) .MuiInput-underline {
  min-height: 52px;
  padding: 2px 12px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .23);
  transition: box-shadow .2s ease;
}
html[class*="active-theme-"] .md-input-container-margin:has(.help-under-select) .MuiInput-underline:hover {
  box-shadow: inset 0 0 0 1px var(--m2-text);
}
html[class*="active-theme-"] .md-input-container-margin:has(.help-under-select) .MuiInput-underline.Mui-focused {
  box-shadow: inset 0 0 0 1.5px var(--m2-dark), var(--m2-ring);
}
html[class*="active-theme-"] body:not(.light-mode) .md-input-container-margin:has(.help-under-select) .MuiInput-underline {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
html[class*="active-theme-"] .md-input-container-margin:has(.help-under-select) .MuiInput-underline::before,
html[class*="active-theme-"] .md-input-container-margin:has(.help-under-select) .MuiInput-underline::after {
  display: none;
}
html[class*="active-theme-"] .md-input-container-margin .help-under-select {
  margin-top: 8px;
  color: var(--m2-muted);
  font-size: 11.5px;
  line-height: 1.5;
}
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item .md-list-item-text > :last-child {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---------- chat: own vs others, system messages ---------- */
html[class*="active-theme-"] .chat-container .chat-list md-list-item.chat-odd {
  background: transparent !important;
}
html[class*="active-theme-"] .chat-container .chat-list md-list-item:not(.chat-odd) h3.chat-body > span {
  background: linear-gradient(135deg, rgba(85, 200, 232, .16), rgba(8, 145, 178, .1));
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .32);
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body > span:has(> .md-caption) {
  padding: 6px 12px;
  border-radius: 999px !important;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--m2-border);
  color: var(--m2-muted);
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body > span > .md-caption {
  color: var(--m2-muted);
  font-size: 12px;
}
html[class*="active-theme-"] .chat-container .chat-list h3.chat-body > span > .md-caption md-icon {
  color: var(--m2-dark);
}
html[class*="active-theme-"] .chat-list img.the-avatar[src*="logo.iconset/"] {
  content: url("/m2theme/brand/box-icon.svg?v=2");
  box-sizing: border-box;
  padding: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2236, #0b3a55);
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35);
}

/* ---------- chat: call stage ---------- */
html[class*="active-theme-"] .call-container,
html[class*="active-theme-"] .call-container .conference-shroud,
html[class*="active-theme-"] .call-container .main-rtc-video {
  background: transparent !important;
}
html[class*="active-theme-"] .call-container {
  position: relative;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(85, 200, 232, .22) 0%, rgba(85, 200, 232, 0) 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(8, 145, 178, .35) 0%, rgba(8, 145, 178, 0) 60%),
    linear-gradient(180deg, #071a29 0%, #04101a 100%) !important;
}
html[class*="active-theme-"] .call-container video {
  border-radius: 14px;
}
html[class*="active-theme-"] .call-container .main-rtc-video .md-avatar contact-avatar {
  position: relative;
}
html[class*="active-theme-"] .call-container .main-rtc-video .md-avatar .initials.real {
  box-shadow: 0 0 0 6px rgba(85, 200, 232, .14), 0 0 0 14px rgba(85, 200, 232, .07), 0 12px 40px rgba(8, 145, 178, .45);
  animation: m2-call-halo 2.8s ease-in-out infinite;
}
@keyframes m2-call-halo {
  0%, 100% { box-shadow: 0 0 0 6px rgba(85, 200, 232, .14), 0 0 0 14px rgba(85, 200, 232, .07), 0 12px 40px rgba(8, 145, 178, .45); }
  50% { box-shadow: 0 0 0 10px rgba(85, 200, 232, .18), 0 0 0 24px rgba(85, 200, 232, .05), 0 12px 40px rgba(8, 145, 178, .45); }
}
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] .call-container .main-rtc-video .md-avatar .initials.real { animation: none; }
}

/* ---------- chat: call controls ---------- */
html[class*="active-theme-"] .large-call-controls {
  padding: 10px 0 18px;
  background: linear-gradient(180deg, rgba(4, 16, 26, 0) 0%, rgba(4, 16, 26, .75) 100%) !important;
}
html[class*="active-theme-"] .large-call-controls .call-quality-measurement {
  margin-bottom: 8px;
  color: rgba(207, 227, 239, .7);
  font-size: 11px;
  letter-spacing: .02em;
}
html[class*="active-theme-"] .large-call-controls md-list.grid-like {
  justify-content: center !important;
  gap: 14px;
}
html[class*="active-theme-"] .large-call-controls md-list.grid-like > md-list-item {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
  padding: 0;
}
html[class*="active-theme-"] .large-call-controls md-list-item button {
  width: 52px !important;
  height: 52px !important;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 22px rgba(0, 0, 0, .3);
  color: #fff !important;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
html[class*="active-theme-"] .large-call-controls md-list-item button:hover {
  background: rgba(255, 255, 255, .18) !important;
  transform: translateY(-2px);
}
html[class*="active-theme-"] .large-call-controls md-list-item button .material-icons {
  color: #fff !important;
  font-size: 22px;
  line-height: 52px;
}
html[class*="active-theme-"] .large-call-controls md-list-item button .MuiIconButton-label .material-icons {
  line-height: 1;
}
html[class*="active-theme-"] .large-call-controls md-list-item button[data-m2-off] {
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
html[class*="active-theme-"] .large-call-controls md-list-item button[data-m2-off] .material-icons {
  color: #e11d48 !important;
}
html[class*="active-theme-"] .large-call-controls md-list-item button[data-m2-active] {
  background: var(--m2-grad) !important;
  box-shadow: 0 8px 22px rgba(8, 145, 178, .45);
}

/* ---------- chat: call toolbar (hold / hang up) ---------- */
html[class*="active-theme-"] md-dialog md-toolbar .md-button[ng-click="call.toggleHoldCall()"] {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .08) !important;
}
html[class*="active-theme-"] md-dialog md-toolbar .md-button[ng-click="call.terminateWillingly()"] {
  width: auto;
  min-width: 52px;
  margin-inline: 4px 6px;
  padding: 0 14px;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 6px 16px rgba(225, 29, 72, .35);
}
html[class*="active-theme-"] md-dialog md-toolbar .md-button[ng-click="call.terminateWillingly()"]:hover {
  background: linear-gradient(135deg, #fb7185, #e11d48) !important;
}
html[class*="active-theme-"] md-dialog md-toolbar .md-button[ng-click="call.terminateWillingly()"] md-icon {
  color: #fff !important;
}

/* ---------- chat: participants bar in call ---------- */
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant-in-voice > md-icon.md-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  transition: background .2s ease;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant-in-voice:hover > md-icon.md-avatar {
  background: rgba(255, 255, 255, .16);
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant-in-voice-selected > md-icon.md-avatar {
  background: var(--m2-grad);
  box-shadow: 0 6px 16px rgba(8, 145, 178, .35);
}
html[class*="active-theme-"] .large-call-controls md-list-item button.md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[class*="active-theme-"] .large-call-controls md-list-item button.md-button md-icon {
  margin: 0;
  line-height: 24px;
}
html[class*="active-theme-"] .call-container video {
  background: transparent !important;
}

/* ---------- chat: participants bar layout ---------- */
html[class*="active-theme-"] md-toolbar.user-bar .layout-align-space-around-start {
  justify-content: center !important;
  align-items: flex-start;
  gap: 18px;
  padding: 0 16px;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px !important;
  min-width: 64px;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant > .md-avatar {
  width: 40px !important;
  margin: 0 !important;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant .name {
  max-width: 64px;
  height: 16px;
  margin-top: 3px !important;
  font-size: 11.5px;
  line-height: 16px;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant[track-event="CHAT_CALL_TOGGLE_CONFERENCE"] {
  position: relative;
  margin-inline-end: 4px !important;
}
html[class*="active-theme-"] md-toolbar.user-bar .chat-participant[track-event="CHAT_CALL_TOGGLE_CONFERENCE"]::after {
  content: "";
  position: absolute;
  top: 12px;
  inset-inline-end: -12px;
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .14);
}
html[class*="active-theme-"] md-toolbar.user-bar .toggler .md-icon-button {
  width: 52px;
  height: 14px !important;
  min-height: 0 !important;
  border-radius: 9px 9px 0 0;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background .2s ease;
}
html[class*="active-theme-"] md-toolbar.user-bar .toggler .md-icon-button:hover {
  background: rgba(85, 200, 232, .3);
}
html[class*="active-theme-"] md-toolbar.user-bar .toggler .md-icon-button md-icon {
  min-height: 14px;
  height: 14px;
  font-size: 22px;
  line-height: 14px;
  color: #fff;
}

/* ---------- chat: call controls alignment across tiles ---------- */
html[class*="active-theme-"] .large-call-controls md-list.grid-like {
  min-height: 52px;
  align-items: center !important;
}
html[class*="active-theme-"] .large-call-controls md-list.grid-like > md-list-item,
html[class*="active-theme-"] .large-call-controls md-list.grid-like > md-list-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px !important;
  min-height: 52px !important;
}
html[class*="active-theme-"] .large-call-controls md-list.grid-like > md-list-item:has(button[style*="hidden"]) {
  display: none !important;
}
html[class*="active-theme-"] .large-call-controls .call-quality-measurement {
  display: table;
  margin: 0 auto 10px !important;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  line-height: 16px;
  white-space: nowrap;
}
html[class*="active-theme-"] .large-call-controls .call-quality-measurement > span + span {
  margin-inline-start: 4px;
  font-weight: 600;
}

/* ---------- files: side navigation ---------- */
html[class*="active-theme-"] .react-sidenav .m2-storage > .md-padding + .md-padding .disk-usage-label.text-center[data-m2-label] {
  font-size: 0 !important;
  line-height: 20px;
}
html[class*="active-theme-"] .react-sidenav .m2-storage [data-m2-unlimited] .MuiLinearProgress-root,
html[class*="active-theme-"] .react-sidenav .m2-storage [data-m2-unlimited]::after {
  display: none;
}
html[class*="active-theme-"] .react-sidenav .m2-storage [data-m2-unlimited] .disk-usage-label.text-center[data-m2-pct]::after {
  color: var(--m2-primary);
  background: rgba(85, 200, 232, .12);
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .3);
}
html[class*="active-theme-"] .react-sidenav p[data-m2-text] {
  font-size: 0 !important;
}
html[class*="active-theme-"] .react-sidenav p[data-m2-text]::before {
  content: attr(data-m2-text);
  font-size: 16px;
}
html[class*="active-theme-"] .react-sidenav .sidenav-part {
  flex-wrap: nowrap;
  padding: 10px 14px 10px 5px !important;
}
html[class*="active-theme-"] .react-sidenav .sidenav-part .MuiFab-extended {
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
html[class*="active-theme-"] .react-sidenav .sidenav-part .MuiFab-extended .material-icons {
  margin-inline-end: 6px;
  font-size: 20px;
}
html[class*="active-theme-"] .react-sidenav .sidenav-part .MuiFab-extended:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(8, 145, 178, .45) !important;
}
html[class*="active-theme-"] .react-sidenav button[title] .red-counter-wrapper {
  top: 4px;
}
html[class*="active-theme-"] .react-sidenav .red-counter {
  background: #e11d48 !important;
  font-weight: 700;
  box-shadow: 0 0 0 2px #071a2a;
}

/* ---------- files: "New" menu ---------- */
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) {
  min-width: 220px;
  padding: 6px !important;
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiMenuItem-root {
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 10px;
  gap: 12px;
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiMenuItem-root:hover,
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiMenuItem-root.Mui-focusVisible {
  background: rgba(85, 200, 232, .12) !important;
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiListItemIcon-root {
  min-width: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(85, 200, 232, .10);
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiListItemIcon-root img {
  width: 20px !important;
  height: 20px !important;
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiListItemIcon-root .material-icons {
  font-size: 20px;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiMenuItem-root:hover .MuiListItemIcon-root {
  background: rgba(85, 200, 232, .2);
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiListItemText-primary {
  font-size: 14px;
  font-weight: 500;
  color: var(--m2-text);
}
html[class*="active-theme-"] .MuiMenu-list:has(img[src*="crossoffice"]) .MuiDivider-root {
  margin: 6px 10px;
  background-color: var(--m2-border);
}
html[class*="active-theme-"] .react-sidenav .sidenav-part .MuiFab-extended .MuiFab-label .material-icons {
  color: #fff !important;
}

/* ---------- dialogs: action buttons ---------- */
html[class*="active-theme-"] md-dialog md-dialog-actions {
  gap: 8px;
  padding: 10px 16px 12px;
}
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button {
  min-height: 36px;
  line-height: 36px;
  margin: 0;
  padding: 0 16px;
  border-radius: 10px !important;
  text-transform: none;
  font-weight: 600;
  letter-spacing: .01em;
}
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button.md-secondary,
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button:not(.md-primary):not(.md-warn) {
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button.md-secondary:hover {
  background: rgba(85, 200, 232, .1) !important;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button.md-primary:is([type="submit"], :last-child):not([disabled]) {
  background: var(--m2-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(8, 145, 178, .3);
}
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button.md-primary:is([type="submit"], :last-child):not([disabled]):hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(8, 145, 178, .4);
}
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button.md-primary:is([type="submit"], :last-child)[disabled] {
  background: rgba(85, 200, 232, .14) !important;
  color: var(--m2-muted) !important;
}

/* ---------- files: breadcrumbs (override toolbar themable buttons) ---------- */
html[class*="active-theme-"] md-content#content md-toolbar .md-button.themable.crumbnavi {
  min-height: 32px;
  line-height: 32px;
  margin: 0 2px;
  padding: 0 12px;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--m2-muted) !important;
  box-shadow: none !important;
  font-weight: 600;
  text-transform: none;
}
html[class*="active-theme-"] md-content#content md-toolbar .md-button.themable.crumbnavi:not([disabled]):hover {
  background: rgba(85, 200, 232, .12) !important;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] md-content#content md-toolbar .md-button.themable.crumbnavi[disabled] {
  background: rgba(85, 200, 232, .14) !important;
  color: var(--m2-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .25) !important;
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content md-toolbar .md-button.themable.crumbnavi[disabled] {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-content#content md-toolbar .crumb-trail .sep {
  display: inline-block;
  margin: 0 2px;
  font-size: 0;
  vertical-align: middle;
}
html[class*="active-theme-"] md-content#content md-toolbar .crumb-trail .sep::before {
  content: "chevron_right";
  font-family: "Material Icons";
  font-size: 18px;
  color: var(--m2-muted);
  opacity: .7;
}

/* ---------- files: details drawer (right) ---------- */
html[class*="active-theme-"] md-content#content .MuiDrawer-paperAnchorRight.react-sidenav md-toolbar.sidenav-part {
  background: linear-gradient(135deg, #05141f, #0a2744) !important;
  color: #e6f4fa !important;
  border-bottom: 1px solid rgba(85, 200, 232, .14);
  box-shadow: none !important;
}
html[class*="active-theme-"] md-content#content .MuiDrawer-paperAnchorRight.react-sidenav md-toolbar.sidenav-part .MuiIconButton-root,
html[class*="active-theme-"] md-content#content .MuiDrawer-paperAnchorRight.react-sidenav md-toolbar.sidenav-part .material-icons {
  color: #cfe6f1 !important;
}
html[class*="active-theme-"] md-content#content .MuiDrawer-paperAnchorRight.react-sidenav md-toolbar.sidenav-part .MuiIconButton-root:hover {
  background: rgba(85, 200, 232, .18) !important;
  color: #fff !important;
}
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .md-toolbar-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .md-button.md-icon-button,
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .MuiIconButton-root {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .md-button.md-icon-button:hover,
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .MuiIconButton-root:hover {
  background: rgba(85, 200, 232, .18) !important;
}
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .md-button.md-icon-button:hover md-icon,
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .md-button.md-icon-button:hover .material-icons,
html[class*="active-theme-"] md-content#content .MuiDrawer-paper:has(.file-details) md-toolbar.sidenav-part .MuiIconButton-root:hover .material-icons {
  color: #fff !important;
}

/* ---------- files: list table ---------- */
html[class*="active-theme-"] .ReactVirtualized__Table__headerRow .MuiTableCell-head {
  color: var(--m2-muted) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--m2-border) !important;
}
html[class*="active-theme-"] .ReactVirtualized__Table__row .MuiTableCell-body {
  border-bottom: 1px solid var(--m2-border) !important;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .ReactVirtualized__Table__row .MuiTableCell-body .md-body-2 {
  color: var(--m2-text);
  font-weight: 600;
}
html[class*="active-theme-"] .ReactVirtualized__Table__row {
  transition: background .15s ease;
}
html[class*="active-theme-"] .ReactVirtualized__Table__row:hover {
  background: rgba(85, 200, 232, .07);
}
html[class*="active-theme-"] .ReactVirtualized__Table__row i.fa-folder,
html[class*="active-theme-"] .ReactVirtualized__Table__row i.fa-folder-o,
html[class*="active-theme-"] .ReactVirtualized__Table__row i[class*="fa-folder"] {
  color: var(--m2-primary);
  filter: drop-shadow(0 2px 4px rgba(8, 145, 178, .3));
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiTableCell-body:has(> .MuiIconButton-root) {
  justify-content: center;
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiIconButton-root {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiIconButton-root .material-icons {
  font-size: 18px;
  color: var(--m2-muted);
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiIconButton-root:hover {
  background: rgba(85, 200, 232, .16) !important;
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiIconButton-root:hover .material-icons {
  color: var(--m2-dark);
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiIconButton-root[data-m2-icon="star"] {
  background: color-mix(in srgb, var(--m2-tone-amber) 18%, transparent) !important;
}
html[data-m2-page="files"] .ReactVirtualized__Table__row .MuiIconButton-root[data-m2-icon="star"] .material-icons {
  color: var(--m2-tone-amber);
}

/* ---------- dialogs: toggle button groups (new document) ---------- */
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-root {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 4px;
}
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-grouped {
  justify-content: flex-start;
  min-height: 44px;
  padding: 8px 14px;
  margin: 0 !important;
  border: 1px solid var(--m2-border) !important;
  border-radius: 12px !important;
  background: var(--m2-card);
  color: var(--m2-text) !important;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-grouped .MuiToggleButton-label {
  justify-content: flex-start;
  gap: 12px;
}
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-grouped .material-icons {
  margin: 0 !important;
  font-size: 20px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-grouped:hover {
  background: rgba(85, 200, 232, .07) !important;
  border-color: rgba(8, 145, 178, .3) !important;
}
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-grouped.Mui-selected {
  background: rgba(85, 200, 232, .12) !important;
  border-color: var(--m2-dark) !important;
  box-shadow: 0 0 0 3px rgba(85, 200, 232, .18);
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] body:not(.light-mode) md-dialog .MuiToggleButtonGroup-grouped.Mui-selected {
  color: var(--m2-primary) !important;
  border-color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-dialog .MuiToggleButtonGroup-grouped.Mui-selected::after {
  content: "check_circle";
  margin-inline-start: auto;
  font-family: "Material Icons";
  font-size: 18px;
  color: var(--m2-dark);
}
html[class*="active-theme-"] md-dialog .MuiTypography-subtitle2 {
  margin: 14px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--m2-muted);
}

/* ---------- files: details drawer body ---------- */
html[class*="active-theme-"] .react-sidenav .preview.file-icon {
  margin: 12px 14px 4px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(85, 200, 232, .14);
  overflow: hidden;
}
html[class*="active-theme-"] .react-sidenav .preview.file-icon img.thing {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds,
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds + div {
  padding: 0 14px !important;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds > div {
  padding: 0 !important;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds .md-button,
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds + div > .md-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 10px 0 0;
  border-radius: 12px !important;
  text-transform: none;
  font-weight: 600;
  letter-spacing: .01em;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds .md-button.md-raised.md-primary:not([disabled]) {
  background: rgba(85, 200, 232, .1) !important;
  color: var(--m2-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35) !important;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds .md-button.md-raised.md-primary:not([disabled]):hover {
  background: rgba(85, 200, 232, .18) !important;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds .md-button::before {
  content: "link";
  font-family: "Material Icons";
  font-size: 18px;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds + div > .md-button {
  background: var(--m2-grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(8, 145, 178, .35) !important;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds + div > .md-button::before {
  content: "open_in_new";
  font-family: "Material Icons";
  font-size: 18px;
}
html[class*="active-theme-"] .react-sidenav .get-shareable-link-bounds + div > .md-button:hover {
  filter: brightness(1.06);
}
html[class*="active-theme-"] .file-details .preview.file-icon .embed-previewer,
html[class*="active-theme-"] .file-details .preview.file-icon .embed-previewer span,
html[class*="active-theme-"] .file-details .preview.file-icon .no-preview {
  white-space: normal !important;
  line-height: 1.4;
  text-align: center;
}
html[class*="active-theme-"] .file-details .preview.file-icon .md-title {
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.45;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
html[class*="active-theme-"] .file-details .no-preview[data-m2-preview] > .break-word,
html[class*="active-theme-"] .file-details .no-preview[data-m2-preview] > .md-title {
  display: none !important;
}
html[class*="active-theme-"] .file-details .m2-quick {
  width: 100%;
  max-height: 148px;
  margin: 0 0 10px;
  overflow: hidden;
  border-radius: 10px;
  color: #e6f4fa;
  text-align: start;
}
html[class*="active-theme-"] .file-details .m2-quick-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  max-height: none;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
html[class*="active-theme-"] .file-details .m2-quick pre {
  margin: 0;
  padding: 10px 12px;
  max-height: 148px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: start;
}
html[class*="active-theme-"] .file-details .m2-quick img,
html[class*="active-theme-"] .file-details .m2-quick video {
  display: block;
  width: 100%;
  max-height: 148px;
  object-fit: contain;
  background: #fff;
}
html[class*="active-theme-"] .file-details .m2-quick iframe {
  display: block;
  width: 100%;
  height: 148px;
  border: 0;
  background: #fff;
}
html[class*="active-theme-"] .file-details .m2-quick audio {
  width: 100%;
}
html[class*="active-theme-"] .file-details .preview.file-icon .md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0 !important;
  min-height: 34px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  text-transform: none !important;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--m2-grad) !important;
  color: var(--m2-ink) !important;
  box-shadow: none !important;
}
html[class*="active-theme-"] .file-details .get-shareable-link-bounds + div + div {
  padding: 0 14px 4px !important;
}
html[class*="active-theme-"] .file-details .get-shareable-link-bounds + div + div > .md-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 8px 0 0 !important;
  border-radius: 12px !important;
  text-transform: none !important;
  font-weight: 600;
  letter-spacing: 0;
  background: #fff !important;
  color: #0b2232 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important;
}
html[class*="active-theme-"] .file-details .get-shareable-link-bounds + div + div > .md-button:hover {
  background: #e7f6fb !important;
}
html[class*="active-theme-"] .file-details table.selectable,
html[class*="active-theme-"] .file-details table.selectable tbody,
html[class*="active-theme-"] .file-details table.selectable td {
  display: block;
  width: auto !important;
  max-width: 100%;
}
html[class*="active-theme-"] .file-details table.selectable {
  width: 100% !important;
}
html[class*="active-theme-"] .file-details table.selectable tr:not(.ng-hide) {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}
html[class*="active-theme-"] .file-details table.selectable td,
html[class*="active-theme-"] .file-details table.selectable .hyperlink {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- files: selected row ---------- */
html[class*="active-theme-"] .ReactVirtualized__Table__row:has(.Mui-checked) {
  background: rgba(85, 200, 232, .12);
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] .ReactVirtualized__Table__row .MuiCheckbox-root.Mui-checked {
  color: var(--m2-dark) !important;
}

/* ---------- menus: destructive items ---------- */
html[class*="active-theme-"] .MuiMenu-list [role="menuitem"][data-m2-danger] {
  color: #e11d48 !important;
}
html[class*="active-theme-"] .MuiMenu-list [role="menuitem"][data-m2-danger] .MuiListItemIcon-root {
  background: transparent !important;
}
html[class*="active-theme-"] .MuiMenu-list [role="menuitem"][data-m2-danger] .material-icons {
  color: #e11d48 !important;
}
html[class*="active-theme-"] .MuiMenu-list [role="menuitem"][data-m2-danger]:hover {
  background: rgba(225, 29, 72, .08) !important;
}

/* ---------- contacts: group list (left nav items without icons) ---------- */
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)) {
  margin: 2px 8px;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 10px;
  border-bottom: 0 !important;
  color: #cfe6f1;
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)) p {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500 !important;
  text-transform: capitalize;
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)) p::before {
  content: "label";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(85, 200, 232, .1);
  font-family: "Material Icons";
  font-size: 16px;
  font-weight: normal;
  text-transform: none;
  color: #7fb9d3;
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)):first-child p::before {
  content: "contacts";
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)):hover {
  background: rgba(85, 200, 232, .08) !important;
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)):has(p[style*="bold"]) {
  background: rgba(85, 200, 232, .16) !important;
  color: #fff;
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)):has(p[style*="bold"]) p {
  font-weight: 700 !important;
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)):has(p[style*="bold"]) p::before {
  background: var(--m2-grad);
  color: #fff;
}

/* ---------- contacts: profile drawer (right) ---------- */
html[class*="active-theme-"] md-content#content .react-sidenav [ng-controller="ProfileInfoCtrl"] md-toolbar {
  background: linear-gradient(135deg, #05141f, #0a2744) !important;
  border-bottom: 1px solid rgba(85, 200, 232, .14);
  box-shadow: none !important;
}
html[class*="active-theme-"] md-content#content .react-sidenav [ng-controller="ProfileInfoCtrl"] md-toolbar .md-icon-button md-icon {
  color: #cfe6f1 !important;
}
html[class*="active-theme-"] md-content#content .react-sidenav [ng-controller="ProfileInfoCtrl"] md-toolbar .md-icon-button:hover {
  background: rgba(85, 200, 232, .14) !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-content {
  background: transparent !important;
  color: #e6f4fa;
  padding: 0 0 16px !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line {
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 18px !important;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(85, 200, 232, .16) 0%, rgba(85, 200, 232, 0) 70%);
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line > .md-avatar {
  width: 96px !important;
  height: 96px !important;
  margin: 0 0 12px !important;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(85, 200, 232, .14), 0 12px 32px rgba(8, 145, 178, .35);
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line > .md-avatar contact-avatar,
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line > .md-avatar .initials-area,
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line > .md-avatar .initials.real {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line .md-list-item-text {
  align-items: center;
  width: 100%;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--m2-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  unicode-bidi: plaintext;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line h2 spawn-contact-source:has(md-icon) {
  order: 2;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line h2 md-icon {
  min-width: 0;
  min-height: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(85, 200, 232, .16);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line h4:empty,
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-3-line .md-secondary-container:empty {
  display: none;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-divider {
  border-color: rgba(85, 200, 232, .1) !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] .md-subheader {
  background: transparent !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] .md-subheader .md-subheader-inner {
  padding: 16px 18px 6px;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] .md-subheader-content {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8fb3c7 !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line {
  margin: 4px 12px;
  min-height: 56px;
  padding: 0 6px 0 14px !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(85, 200, 232, .14);
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line + md-divider {
  display: none;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line .md-list-item-text {
  min-width: 0;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e6f4fa !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line p {
  font-size: 11.5px !important;
  color: #8fb3c7 !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line .md-secondary-container .md-icon-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0 !important;
  padding: 6px;
  border-radius: 10px !important;
  background: rgba(85, 200, 232, .12);
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line .md-secondary-container .md-icon-button md-icon {
  color: var(--m2-primary) !important;
  font-size: 20px;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line .md-secondary-container .md-icon-button:hover {
  background: var(--m2-grad) !important;
}
html[class*="active-theme-"] .react-sidenav [ng-controller="ProfileInfoCtrl"] md-list-item.md-2-line .md-secondary-container .md-icon-button:hover md-icon {
  color: #fff !important;
}

/* ---------- tables: primary (name) column ---------- */
html[class*="active-theme-"] .ReactVirtualized__Table__row [aria-colindex="2"] .MuiTableCell-body {
  color: var(--m2-text) !important;
  font-weight: 600;
  unicode-bidi: plaintext;
}

/* ---------- avatars: center initials for any script ---------- */
html[class*="active-theme-"] .initials.real > .inner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html[class*="active-theme-"] .initials.real > .inner > .text {
  line-height: 1 !important;
}
html[class*="active-theme-"] .initials.real[data-m2-ar] > .inner > .text {
  font-family: "M2 Cairo", var(--m2-font) !important;
  transform: translateY(-14%);
}

/* ---------- page FAB: stay clear of a docked right drawer ---------- */
html[class*="active-theme-"] md-content#content .md-fab.md-fab-bottom-right {
  right: calc(var(--m2-rdrawer, 0px) + 24px) !important;
  transition: right .2s ease, box-shadow .2s ease, transform .2s ease;
}
html[dir="rtl"] md-content#content .md-fab.md-fab-bottom-right,
body[dir="rtl"] md-content#content .md-fab.md-fab-bottom-right {
  right: auto !important;
  left: calc(var(--m2-rdrawer, 0px) + 24px) !important;
}

/* ---------- contacts: editor dialog ---------- */
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-adder-link {
  margin: 3px 5px;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-adder-link > span.pointer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px dashed rgba(8, 145, 178, .35);
  background: rgba(85, 200, 232, .06);
  color: var(--m2-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-adder-link > span.pointer::before {
  content: "add";
  font-family: "Material Icons";
  font-size: 18px;
  font-weight: normal;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-adder-link > span.pointer:hover,
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-adder-link > span.pointer:focus-visible {
  background: rgba(85, 200, 232, .14);
  border-color: var(--m2-dark);
  border-style: solid;
}
html[class*="active-theme-"] body:not(.light-mode) :is(md-dialog, embed-contact-manage) .contact-adder-link > span.pointer {
  color: var(--m2-primary);
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .md-button[ngf-select]:not(.md-icon-button) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 6px 5px !important;
  padding: 0 16px 0 12px;
  border-radius: 10px !important;
  background: var(--m2-card) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .35) !important;
  color: var(--m2-dark) !important;
  text-transform: none;
  font-weight: 600;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .md-button[ngf-select]:not(.md-icon-button)::before {
  content: "add_a_photo";
  font-family: "Material Icons";
  font-size: 18px;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .md-button[ngf-select]:not(.md-icon-button):hover {
  background: rgba(85, 200, 232, .12) !important;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-sides h3.md-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
  font-family: var(--m2-font-display) !important;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--m2-text);
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .contact-sides h3.md-title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: var(--m2-grad);
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .MuiOutlinedInput-root {
  border-radius: 10px !important;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--m2-dark) !important;
  border-width: 1.5px !important;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .MuiOutlinedInput-notchedOutline {
  border-radius: 10px !important;
}
html[class*="active-theme-"] :is(md-dialog, embed-contact-manage) .MuiInputLabel-root.Mui-focused {
  color: var(--m2-dark) !important;
}

/* ---------- form fields: their container draws the focus state ---------- */
html[class*="active-theme-"] .MuiInputBase-input:focus-visible,
html[class*="active-theme-"] md-input-container input:focus-visible,
html[class*="active-theme-"] md-input-container textarea:focus-visible,
html[class*="active-theme-"] .MuiSelect-select:focus-visible {
  outline: none !important;
}
html[class*="active-theme-"] .react-sidenav nav.MuiList-root > .MuiListItem-button:not(:has(.MuiListItemIcon-root)) p > .md-badge {
  margin-inline-start: -8px;
}

/* ---------- notes: editor type tabs (segmented) ---------- */
html[class*="active-theme-"] md-dialog md-dialog-content .MuiTabs-root {
  min-height: 0;
  margin: 12px 16px 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(85, 200, 232, .08);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] md-dialog md-dialog-content .MuiTabs-root .MuiTab-root {
  min-height: 36px;
  border-radius: 9px;
  color: var(--m2-muted) !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
  transition: background .15s ease, color .15s ease;
}
html[class*="active-theme-"] md-dialog md-dialog-content .MuiTabs-root .MuiTab-root:hover {
  color: var(--m2-text) !important;
  background: rgba(85, 200, 232, .08);
}
html[class*="active-theme-"] md-dialog md-dialog-content .MuiTabs-root .MuiTab-root.Mui-selected {
  background: var(--m2-grad);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(8, 145, 178, .3);
}
html[class*="active-theme-"] md-dialog md-dialog-content .MuiTabs-root .MuiTabs-indicator {
  display: none;
}

/* ---------- notes: drawing editor (separate MUI build, suffixed class names) ---------- */
html[class*="active-theme-"] md-dialog header[class*="MuiAppBar-colorPrimary"] {
  background: linear-gradient(135deg, #05141f, #0a2744) !important;
  border-top: 1px solid rgba(85, 200, 232, .18);
  box-shadow: 0 -8px 24px rgba(5, 20, 31, .12) !important;
  color: #e6f4fa !important;
}
html[class*="active-theme-"] md-dialog header[class*="MuiAppBar-colorPrimary"] [class*="MuiIconButton-root"] {
  color: #cfe6f1 !important;
  border-radius: 10px;
}
html[class*="active-theme-"] md-dialog header[class*="MuiAppBar-colorPrimary"] [class*="MuiIconButton-root"]:hover {
  background: rgba(85, 200, 232, .14);
  color: #fff !important;
}
html[class*="active-theme-"] md-dialog header[class*="MuiAppBar-colorPrimary"] [class*="MuiIconButton-root"][class*="disabled"],
html[class*="active-theme-"] md-dialog header[class*="MuiAppBar-colorPrimary"] [class*="MuiIconButton-root"]:disabled {
  color: rgba(207, 230, 241, .35) !important;
}
html[class*="active-theme-"] md-dialog header[class*="MuiAppBar-colorPrimary"] svg {
  color: inherit;
}
html[class*="active-theme-"] md-dialog [class*="MuiSlider-rail"] {
  background: rgba(255, 255, 255, .35) !important;
}
html[class*="active-theme-"] md-dialog [class*="MuiSlider-track"],
html[class*="active-theme-"] md-dialog [class*="MuiSlider-thumb"] {
  background-color: var(--m2-primary) !important;
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-dialog [class*="MuiSlider-thumb"] {
  box-shadow: 0 0 0 4px rgba(85, 200, 232, .22) !important;
}
html[class*="active-theme-"] md-dialog [class*="MuiSpeedDial-fab"] {
  background: var(--m2-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(8, 145, 178, .4) !important;
}

/* ---------- notes: editor fields (suffixed MUI build) ---------- */
html[class*="active-theme-"] md-dialog textarea,
html[class*="active-theme-"] md-dialog [class*="MuiInputBase-input"] {
  unicode-bidi: plaintext;
  text-align: start;
}
html[class*="active-theme-"] md-dialog [class*="MuiOutlinedInput-root"] {
  border-radius: 12px !important;
}
html[class*="active-theme-"] md-dialog [class*="MuiOutlinedInput-notchedOutline"] {
  border-radius: 12px !important;
  border-color: var(--m2-border) !important;
}
html[class*="active-theme-"] md-dialog [class*="MuiOutlinedInput-root"][class*="focused"] [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--m2-dark) !important;
  border-width: 1.5px !important;
}
html[class*="active-theme-"] md-dialog [class*="MuiCheckbox-root"],
html[class*="active-theme-"] md-dialog [class*="MuiCheckbox-colorPrimary"] {
  color: var(--m2-dark) !important;
}

/* ---------- notes: cards ---------- */
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] {
  border: 1px solid var(--m2-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--m2-shadow) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note]:hover {
  border-color: rgba(8, 145, 178, .3) !important;
  box-shadow: var(--m2-shadow-hover) !important;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] .MuiCardContent-root {
  padding: 16px 18px 6px;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] .MuiTypography-subtitle2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 2px 9px;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(85, 200, 232, .12);
  color: var(--m2-dark) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[class*="active-theme-"] body:not(.light-mode) .react-grid-item.MuiCard-root[note] .MuiTypography-subtitle2 {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] .MuiCardContent-root p.MuiTypography-body1 {
  white-space: pre-line;
  unicode-bidi: plaintext;
  text-align: start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--m2-text);
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions {
  padding: 2px 8px 8px;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions .MuiIconButton-root,
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions .MuiButton-root {
  color: var(--m2-muted) !important;
  border-radius: 10px !important;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions .MuiButton-root {
  text-transform: none;
  font-weight: 600;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions .MuiIconButton-root:hover,
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions .MuiButton-root:hover {
  background: rgba(85, 200, 232, .12);
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] #card-actions [title="Trash"]:hover {
  background: rgba(225, 29, 72, .1);
  color: #e11d48 !important;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] .MuiTypography-h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--m2-font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] .MuiTypography-h5::before {
  content: "edit_note";
  font-family: "Material Icons";
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  color: var(--m2-dark);
}
html[class*="active-theme-"] .react-grid-item.MuiCard-root[note] .MuiTypography-h5 + p.MuiTypography-body1 {
  margin-top: 4px;
  color: var(--m2-muted) !important;
  font-size: 12.5px;
  text-align: center;
}

/* ---------- notes: create speed dial ---------- */
html[class*="active-theme-"] md-content#content md-fab-speed-dial.textual-dial md-fab-trigger .md-fab.textual-fab {
  border-radius: 16px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}
html[class*="active-theme-"] md-content#content md-fab-speed-dial.textual-dial md-fab-trigger .textual-fab-text {
  text-transform: none !important;
}
html[class*="active-theme-"] md-content#content md-fab-speed-dial .md-fab-action-item {
  border-radius: 12px !important;
  background: var(--m2-card) !important;
  color: var(--m2-dark) !important;
  border: 1px solid var(--m2-border) !important;
  box-shadow: var(--m2-shadow) !important;
}
html[class*="active-theme-"] md-content#content md-fab-speed-dial .md-fab-action-item md-icon {
  color: inherit !important;
}
html[class*="active-theme-"] md-content#content md-fab-speed-dial .md-fab-action-item:hover {
  background: var(--m2-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[class*="active-theme-"] md-tooltip.md-panel[md-visible="fab.tooltip"] {
  height: 24px !important;
  padding: 0 11px !important;
  line-height: 22px !important;
  border-radius: 999px !important;
  background: var(--m2-card) !important;
  color: var(--m2-text) !important;
  border: 1px solid var(--m2-border);
  box-shadow: var(--m2-shadow) !important;
  font-family: var(--m2-font-display) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-right: 6px;
}

/* ---------- condensed sidenav: square hover + icon badges ---------- */
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-button:has(> .MuiListItemIcon-root) {
  width: 40px !important;
  min-height: 40px !important;
  margin: 3px auto !important;
  padding: 0 !important;
  border-radius: 12px !important;
  flex: 0 0 auto;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-button:has(> .MuiListItemIcon-root):not(:has(.MuiSwitch-root)) {
  height: 40px !important;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItemIcon-root > span:has(> .red-counter-wrapper) {
  position: relative;
  display: inline-flex;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItemIcon-root .red-counter-wrapper {
  left: 40px !important;
  right: auto !important;
  top: -8px !important;
}
html[class*="active-theme-"] .react-sidenav .collapsed-condensed .sidenav-part {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html[class*="active-theme-"] .collapsed-condensed .MuiListItem-button:has(.MuiSwitch-root) {
  width: 44px !important;
  margin: 3px auto !important;
  border-radius: 12px !important;
}

/* ---------- notifications + activity feed ---------- */
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) {
  border-bottom: 1px solid var(--m2-border);
  transition: background-color .15s ease;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]):hover {
  background-color: rgba(85, 200, 232, .06) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]).unseen {
  background-color: rgba(85, 200, 232, .07) !important;
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy {
  flex: none !important;
  width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  margin: 0 4px 0 16px;
  align-self: center;
  border-radius: 14px;
  background: rgba(85, 200, 232, .14);
  overflow: hidden;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy-front,
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy-back {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy-front md-icon.mediator {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 22px !important;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] body:not(.light-mode) react-component md-list-item.large-flippy flippy[data-m2-icon] md-icon.mediator {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy:is([data-m2-icon="warning"], [data-m2-icon="security"], [data-m2-icon="gpp_maybe"]) {
  background: rgba(245, 158, 11, .14);
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy:is([data-m2-icon="warning"], [data-m2-icon="security"], [data-m2-icon="gpp_maybe"]) md-icon.mediator {
  color: #d97706 !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy:is([data-m2-icon="error"], [data-m2-icon^="delete"], [data-m2-icon="block"]) {
  background: rgba(225, 29, 72, .1);
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy:is([data-m2-icon="error"], [data-m2-icon^="delete"], [data-m2-icon="block"]) md-icon.mediator {
  color: #e11d48 !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy-back .MuiCheckbox-root {
  margin: 0 !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) flippy-back .backdropcircle {
  position: absolute;
  inset: 0;
  width: auto !important;
  height: auto !important;
  border-radius: 14px !important;
  margin: 0 !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) .imitation-md-button {
  padding: 0 16px 0 10px !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) h4.mainf {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]).unseen h4.mainf {
  font-weight: 700 !important;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) p.ellipsis {
  font-size: 13px !important;
  color: var(--m2-muted) !important;
  unicode-bidi: plaintext;
}
html[class*="active-theme-"] react-component:is([name="RComponents.NotificationList"], [name*="Activit"], [name="RComponents.Dashboard"]) md-list-item.large-flippy:has(flippy[data-m2-icon]) h4.lighter {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--m2-muted) !important;
  opacity: .85;
}

/* ---------- activity list ---------- */
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item {
  border-bottom: 1px solid var(--m2-border);
  transition: background-color .15s ease;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item:hover {
  background-color: rgba(85, 200, 232, .06) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item .md-list-item-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item md-icon.mediator[data-m2-icon] {
  flex: none;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px;
  background: rgba(85, 200, 232, .14);
  color: var(--m2-dark) !important;
  font-size: 22px !important;
  line-height: 44px !important;
  text-align: center;
}
html[class*="active-theme-"] body:not(.light-mode) react-component[name="RComponents.ActivityList"] md-icon.mediator[data-m2-icon] {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item md-icon.mediator:is([data-m2-icon="vpn_key"], [data-m2-icon="warning"]) {
  background: rgba(245, 158, 11, .14);
  color: #d97706 !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item md-icon.mediator:is([data-m2-icon="lock"], [data-m2-icon="login"]) {
  background: rgba(16, 185, 129, .12);
  color: #059669 !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item md-icon.mediator:is([data-m2-icon="power_settings_new"], [data-m2-icon="logout"]) {
  background: rgba(100, 116, 139, .12);
  color: #64748b !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item md-icon.mediator:is([data-m2-icon^="delete"], [data-m2-icon="error"], [data-m2-icon="block"]) {
  background: rgba(225, 29, 72, .1);
  color: #e11d48 !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item .md-list-item-text h4:not(.lighter) {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item .md-list-item-text p.ellipsis {
  font-size: 13px !important;
  color: var(--m2-muted) !important;
  unicode-bidi: plaintext;
}
html[class*="active-theme-"] react-component[name="RComponents.ActivityList"] md-list-item .md-list-item-text h4.lighter {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--m2-muted) !important;
  opacity: .85;
}

/* ---------- reminders list ---------- */
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item {
  border-bottom: 1px solid var(--m2-border);
  transition: background-color .15s ease;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item:hover {
  background-color: rgba(85, 200, 232, .06) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item > .md-button.md-no-style {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px 0 0 !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item .imitation-md-button {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 0 16px !important;
  text-align: start;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item .imitation-md-button::before {
  content: "notifications_active";
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(85, 200, 232, .14);
  color: var(--m2-dark);
  font-family: "Material Icons";
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  font-feature-settings: "liga";
}
html[class*="active-theme-"] body:not(.light-mode) react-component[name="RComponents.ReminderList"] .imitation-md-button::before {
  color: var(--m2-primary);
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item .md-list-item-text {
  min-width: 0;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item h4.mainf {
  margin: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--m2-text) !important;
  unicode-bidi: plaintext;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item p.ellipsis {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 4px !important;
  padding: 1px 10px 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 12px !important;
  font-weight: 600;
  line-height: 20px;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item p.ellipsis[style*="169, 244"] {
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] body:not(.light-mode) react-component[name="RComponents.ReminderList"] p.ellipsis[style*="169, 244"] {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item p.ellipsis::before {
  content: "schedule";
  font-family: "Material Icons";
  font-size: 14px;
  font-weight: normal;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item h4.lighter {
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item .md-secondary .MuiIconButton-root {
  border-radius: 12px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] react-component[name="RComponents.ReminderList"] md-list-item .md-secondary .MuiIconButton-root:hover {
  background: rgba(225, 29, 72, .1);
  color: #e11d48;
}

/* ---------- settings: consistent card width ---------- */
html[class*="active-theme-"] md-content#content form.login-form.minimize-padding {
  width: min(760px, calc(100% - 48px));
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content form.login-form .md-padding.md-body-1,
html[class*="active-theme-"] body:not(.light-mode) md-content#content form.login-form .md-padding.md-body-1 span {
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .MuiListItem-secondaryAction {
  padding-right: 72px !important;
}
html[class*="active-theme-"] md-content#content form.login-form .MuiListItemSecondaryAction-root img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px;
  object-fit: contain;
}

/* ---------- settings > general: volume + header style ---------- */
html[class*="active-theme-"] md-content#content div:has(> .MuiListItemText-root #volume_control) {
  width: auto !important;
  max-width: none !important;
}
html[class*="active-theme-"] md-content#content #volume_control {
  text-align: start !important;
  padding: 0 0 2px !important;
  font-size: 12px !important;
  font-weight: 600;
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-root {
  width: calc(100% - 12px);
  margin: 0 6px;
}
html[class*="active-theme-"] md-content#content .MuiFormControl-root:has(> .MuiInputBase-root input[name="profile.config.ui_background"]) {
  flex-direction: column-reverse;
}
html[class*="active-theme-"] md-content#content .MuiFormControl-root:has(> .MuiInputBase-root input[name="profile.config.ui_background"]) > .MuiFormHelperText-root {
  margin: 0 0 4px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--m2-muted);
}

/* ---------- settings > folders tree ---------- */
html[class*="active-theme-"] md-content#content .rst__nodeContent {
  right: 16px;
}
html[class*="active-theme-"] md-content#content .rst__rowWrapper,
html[class*="active-theme-"] md-content#content .rst__row,
html[class*="active-theme-"] md-content#content .rst__rowContents,
html[class*="active-theme-"] md-content#content .rst__rowLabel,
html[class*="active-theme-"] md-content#content .rst__rowTitle,
html[class*="active-theme-"] md-content#content .rst__rowTitle > .MuiListItem-container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
html[class*="active-theme-"] md-content#content .rst__rowTitle {
  display: block;
}
html[class*="active-theme-"] md-content#content .rst__rowContents {
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease;
}
html[class*="active-theme-"] md-content#content .rst__rowContents:hover {
  border-color: rgba(8, 145, 178, .35) !important;
  background-color: rgba(85, 200, 232, .05) !important;
}
html[class*="active-theme-"] md-content#content .rst__rowContents .MuiListItemSecondaryAction-root .MuiIconButton-root {
  border-radius: 10px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] md-content#content .rst__rowContents .MuiListItemSecondaryAction-root .MuiIconButton-root:hover {
  background: rgba(85, 200, 232, .12);
  color: var(--m2-dark);
}
html[class*="active-theme-"] md-content#content .rst__rowContents .MuiListItemSecondaryAction-root .MuiIconButton-root:last-child:hover {
  background: rgba(225, 29, 72, .1);
  color: #e11d48;
}

/* ---------- extended page FABs: sentence case ---------- */
html[class*="active-theme-"] md-content#content .md-fab[textual-fab-effect],
html[class*="active-theme-"] md-content#content .md-fab[textual-fab-effect] .textual-fab-text {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

/* ---------- settings: buttons + full-width selects ---------- */
html[class*="active-theme-"] md-content#content form.login-form .md-block[style*="max-width"]:has(.MuiFormControl-fullWidth) {
  max-width: none !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button:not(.md-icon-button):not(.md-fab) {
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  padding: 0 16px;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-raised:not(.md-primary):not(.md-warn):not([disabled]) {
  background: var(--m2-card) !important;
  color: var(--m2-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .35) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-raised:not(.md-primary):not(.md-warn):not([disabled]):hover {
  background: rgba(85, 200, 232, .1) !important;
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content form.login-form .md-button.md-raised:not(.md-primary):not(.md-warn):not([disabled]) {
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-warn.md-raised:not([disabled]) {
  background: #e11d48 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(225, 29, 72, .6) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-raised[disabled] {
  background: transparent !important;
  color: var(--m2-muted) !important;
  box-shadow: inset 0 0 0 1px var(--m2-border) !important;
  opacity: .75;
}
html[class*="active-theme-"] md-toolbar .md-toolbar-tools .md-button[ng-click="ui.rpc()"] {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  border-radius: 10px !important;
}
html[class*="active-theme-"] md-content#content form.login-form > div:last-child > div:last-child > div:last-child > md-divider:last-child {
  display: none;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button[ngf-select]:not(.md-fab):not(.md-icon-button) {
  border-radius: 999px !important;
  min-height: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 13px;
  padding: 0 14px;
}

html[class*="active-theme-"] .react-sidenav .MuiListItem-root[data-m2-hidden],
html[class*="active-theme-"] .see-main-menu .MuiListItem-root[data-m2-hidden] {
  display: none !important;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) > .sidenav-part {
  flex: 0 0 auto !important;
  height: auto !important;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) > .sidenav-part:has([menu-item-type]) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) > .sidenav-part:has([menu-item-type]) > div:has(nav.MuiList-root) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) nav.MuiList-root {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) nav.MuiList-root > .MuiListItem-root,
html[class*="active-theme-"] .drawer-condensed:not(:has(.see-main-menu)) nav.MuiList-root > a[data-m2-tour] {
  flex: 0 0 auto !important;
}
html[class*="active-theme-"] .react-sidenav a[data-m2-tour] {
  margin-top: auto !important;
  text-decoration: none !important;
  color: inherit !important;
}
html[class*="active-theme-"] .react-sidenav a[data-m2-tour] p {
  color: inherit !important;
  margin: 0;
}

/* ---------- settings: signature editor ---------- */
html[class*="active-theme-"] md-content#content form.login-form .the-quill-toolbar {
  border: 1px solid var(--m2-border) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0;
  box-shadow: none !important;
  padding: 6px 8px;
}
html[class*="active-theme-"] md-content#content form.login-form .simple-editor-content {
  border: 1px solid var(--m2-border);
  border-radius: 0 0 12px 12px;
  box-shadow: none !important;
  padding: 16px !important;
  background: #fff;
  overflow-x: auto;
}
html[class*="active-theme-"] md-content#content .simple-editor-content a.m2-mail {
  color: #0C7E99 !important;
  text-decoration: none !important;
}
html[class*="active-theme-"] md-content#content .simple-editor-content a.m2-web {
  color: #6B7280 !important;
  text-decoration: none !important;
}

/* ---------- settings > general: hide header style, volume card ---------- */
html[class*="active-theme-"] md-content#content react-component[name="RComponents.UIHeaderStyleSelect"] {
  display: none !important;
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) {
  border: 1px solid var(--m2-border);
  border-radius: 14px;
  padding: 14px 18px 8px;
  background: rgba(85, 200, 232, .05);
}
html[class*="active-theme-"] md-content#content #volume_control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] md-content#content #volume_control::before {
  content: "volume_up";
  font-family: "Material Icons";
  font-feature-settings: "liga";
  font-weight: normal;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(85, 200, 232, .16);
  color: var(--m2-dark);
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-root {
  height: 6px;
  padding: 14px 0;
  width: calc(100% - 92px);
  margin: 0 46px;
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-root::before,
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-root::after {
  font-family: "Material Icons";
  font-feature-settings: "liga";
  font-size: 18px;
  line-height: 1;
  color: var(--m2-muted);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-root::before {
  content: "volume_mute";
  left: -34px;
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-root::after {
  content: "volume_up";
  right: -34px;
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-rail {
  height: 6px;
  border-radius: 3px;
  opacity: 1;
  background: var(--m2-border);
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-track {
  height: 6px;
  border-radius: 3px;
  background: var(--m2-grad);
}
html[class*="active-theme-"] md-content#content .MuiListItemText-root:has(#volume_control) .MuiSlider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  margin-left: -9px;
  box-sizing: border-box;
  background: #fff;
  border: 3px solid var(--m2-primary);
  box-shadow: 0 2px 8px rgba(8, 145, 178, .35);
}

/* ---------- settings: sectioned pages become stacked cards ---------- */
html[class*="active-theme-"] md-content#content form.login-form.minimize-padding:has(.md-subheader):not(:has([name="RComponents.AppListConfig"])) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
html[class*="active-theme-"] md-content#content form.login-form:has(.md-subheader):not(:has([name="RComponents.AppListConfig"])) .md-padding:not(.md-padding .md-padding) {
  background: var(--m2-card);
  border: 1px solid var(--m2-border);
  border-radius: 16px;
  box-shadow: var(--m2-shadow);
  padding: 18px 20px !important;
  margin: 0 0 14px;
}
html[class*="active-theme-"] md-content#content form.login-form:has(.md-subheader):not(:has([name="RComponents.AppListConfig"])) md-divider {
  display: none;
}
html[class*="active-theme-"] md-content#content form.login-form .md-subheader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px !important;
  font-family: var(--m2-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-subheader::before {
  content: var(--m2-sec-icon, "tune");
  font-family: "Material Icons";
  font-feature-settings: "liga";
  font-weight: normal;
  font-size: 19px;
  line-height: 1;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(85, 200, 232, .16);
  color: var(--m2-dark);
}
html[class*="active-theme-"] body:not(.light-mode) md-content#content form.login-form .md-subheader::before {
  color: var(--m2-primary);
}
html[class*="active-theme-"] md-content#content form.login-form .md-subheader + br {
  display: none;
}
html[class*="active-theme-"] .md-subheader[translate="MAIL_ANTISPAM_MANUAL_SCAN"] { --m2-sec-icon: "security"; }
html[class*="active-theme-"] .md-subheader[translate="MAIL_READING"] { --m2-sec-icon: "chrome_reader_mode"; }
html[class*="active-theme-"] .md-subheader[translate="WRITING"] { --m2-sec-icon: "edit"; }
html[class*="active-theme-"] .md-subheader[translate="MAIL_ANTI_TRACKING"] { --m2-sec-icon: "visibility_off"; }
html[class*="active-theme-"] .md-subheader[translate="MAIL_VIEW_TRACKING"] { --m2-sec-icon: "drafts"; }
html[class*="active-theme-"] .md-subheader[translate="MAIL_INDEX"] { --m2-sec-icon: "speed"; }
html[class*="active-theme-"] .md-subheader[translate="CONTROLS"] { --m2-sec-icon: "send"; }
html[class*="active-theme-"] .md-subheader[translate="ALTERNATIVE_EMAIL_ADDRESS"] { --m2-sec-icon: "alternate_email"; }
html[class*="active-theme-"] .md-subheader[translate="SECRET_QUESTIONS"] { --m2-sec-icon: "help_outline"; }
html[class*="active-theme-"] .md-subheader[translate="TWO_STEP_AUTHENTICATION"] { --m2-sec-icon: "phonelink_lock"; }
html[class*="active-theme-"] .md-subheader[translate="FUNCTIONALITY"] { --m2-sec-icon: "toggle_on"; }
html[class*="active-theme-"] .md-subheader[translate="INTERFACE"] { --m2-sec-icon: "dashboard"; }
html[class*="active-theme-"] .md-subheader[translate="VOICE_CHAT"] { --m2-sec-icon: "mic"; }
html[class*="active-theme-"] .md-subheader[translate="UPLOADING"] { --m2-sec-icon: "cloud_upload"; }
html[class*="active-theme-"] .md-subheader[translate="APP_SETTINGS"] { --m2-sec-icon: "apps"; }

/* ---------- settings: empty states without the boxed card ---------- */
html[class*="active-theme-"] md-content#content form.login-form.minimize-padding:has(.no-things-text) {
  margin-top: 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ---------- settings > profile: section titles + photo button ---------- */
html[class*="active-theme-"] md-content#content embed-contact-manage .md-padding.float-md-padding::before,
html[class*="active-theme-"] md-content#content embed-contact-manage .contact-sides > .md-padding:first-child::before {
  content: "Basic info";
  display: block;
  margin: 0 0 12px;
  padding-left: 14px;
  background: linear-gradient(var(--m2-primary), var(--m2-dark)) left center / 4px 16px no-repeat;
  font-family: var(--m2-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 19px;
  color: var(--m2-text);
}
html[class*="active-theme-"] md-content#content embed-contact-manage .contact-sides > .md-padding:first-child::before {
  content: "Work & notes";
}
html[class*="active-theme-"] md-content#content embed-contact-manage .md-padding.float-md-padding,
html[class*="active-theme-"] md-content#content embed-contact-manage .contact-sides > .md-padding:first-child {
  border-bottom: 1px solid var(--m2-border);
}
html[class*="active-theme-"] md-content#content form.login-form .md-button[ngf-select]:not(.md-fab):not(.md-icon-button) {
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  padding: 0 22px 0 18px;
  font-size: 14px;
  background: linear-gradient(135deg, rgba(85, 200, 232, .16), rgba(8, 145, 178, .1)) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .4) !important;
}

/* ---------- settings > apps: readable enable/disable list ---------- */
html[class*="active-theme-"] md-content#content form.login-form .md-subheader[translate="APP_SETTINGS"]::after {
  content: "Choose which apps appear in your workspace. Click an app to turn it on or off.";
  position: absolute;
  left: 62px;
  top: 40px;
  font-family: var(--m2-font);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--m2-muted);
}
html[class*="active-theme-"] md-content#content form.login-form .md-padding:has(> .md-subheader[translate="APP_SETTINGS"]) {
  position: relative;
  padding-bottom: 30px !important;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] > ul {
  padding: 0 16px 12px;
  display: grid;
  gap: 8px;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li.MuiListItem-container {
  --m2-app-icon: "apps";
  border: 1px solid var(--m2-border);
  border-radius: 14px;
  background: var(--m2-card);
  transition: border-color .15s, background .15s;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li.MuiListItem-container:hover {
  border-color: rgba(85, 200, 232, .55);
  background: rgba(85, 200, 232, .05);
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li .MuiListItem-root {
  border-radius: 14px;
  padding: 10px 150px 10px 12px !important;
  gap: 12px;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li .MuiListItem-root::before {
  content: var(--m2-app-icon);
  font-family: "Material Icons";
  font-feature-settings: "liga";
  font-size: 20px;
  line-height: 1;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--m2-grad);
  color: #fff;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-state="off"] .MuiListItem-root::before {
  background: rgba(100, 116, 139, .14);
  color: #64748b;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li .MuiListItemText-primary {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--m2-text);
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-state="off"] .MuiListItemText-primary {
  color: var(--m2-muted);
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="dashboard"] { --m2-app-icon: "space_dashboard"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="mail"] { --m2-app-icon: "mail"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="chat"] { --m2-app-icon: "chat"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="files"] { --m2-app-icon: "folder"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="contacts"] { --m2-app-icon: "contacts"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="notes"] { --m2-app-icon: "sticky_note_2"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="reminders"] { --m2-app-icon: "notifications_active"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="activity"] { --m2-app-icon: "timeline"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-app="calendar"] { --m2-app-icon: "event"; }
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root {
  right: 12px;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root button:has(> [data-m2-label]:not([data-m2-label=""])) {
  border-radius: 999px;
  padding: 0 12px 0 10px;
  height: 30px;
  gap: 6px;
  background: rgba(16, 185, 129, .12);
  color: #047857;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root button:has(> [data-m2-label]:not([data-m2-label=""])) .MuiIconButton-label > * {
  display: none !important;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root button:has(> [data-m2-label]:not([data-m2-label=""])) .MuiIconButton-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 7px;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root button:has(> [data-m2-label]:not([data-m2-label=""])) .MuiIconButton-label::after {
  content: attr(data-m2-label);
  font-size: 12.5px;
  font-weight: 600;
  white-space: pre;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root button:has(> [data-m2-label]:not([data-m2-label=""])) {
  align-items: center;
  padding-right: 6px;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] .MuiListItemSecondaryAction-root button:has(> [data-m2-label]:not([data-m2-label=""]))::after {
  content: "expand_more";
  font-family: "Material Icons";
  font-weight: normal;
  font-feature-settings: "liga";
  font-size: 22px;
  line-height: 1;
  width: 22px;
  margin-left: -2px;
}
html[class*="active-theme-"] react-component[name="RComponents.AppListConfig"] li[data-m2-state="off"] .MuiListItemSecondaryAction-root button {
  background: rgba(100, 116, 139, .12) !important;
  color: #64748b !important;
}

/* ---------- settings > notifications: matching request/stop buttons ---------- */
html[class*="active-theme-"] md-content#content form.login-form .md-button:is([ng-click="requestNotificationsForDevice()"], [ng-click="removeNotificationsForDevice()"]) {
  height: 40px;
  min-height: 40px;
  line-height: 40px;
  padding: 0 18px;
  margin: 8px 8px 0 0 !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-raised[ng-click="removeNotificationsForDevice()"] {
  background: transparent !important;
  color: #e11d48 !important;
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .4) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-raised[ng-click="removeNotificationsForDevice()"]:not([disabled]):hover {
  background: rgba(225, 29, 72, .08) !important;
}
html[class*="active-theme-"] md-content#content form.login-form .md-button.md-raised[ng-click="removeNotificationsForDevice()"][disabled] {
  opacity: .5;
}

/* ---------- dialogs: sentence-case actions ---------- */
html[class*="active-theme-"] md-dialog md-dialog-actions .md-button {
  text-transform: none !important;
  letter-spacing: 0;
  font-weight: 600;
}
html[class*="active-theme-"] md-content#content form.login-form div:has(input[type="checkbox"]) + :is(.help-under-select, .md-caption) {
  padding-left: 31px;
  margin: -2px 0 10px;
  line-height: 1.5;
  color: var(--m2-muted);
}

/* ---------- settings > delete: short warning instead of the paragraph ---------- */
html[class*="active-theme-"] md-content#content .m2-delete-raw {
  display: none !important;
}
html[class*="active-theme-"] md-content#content .m2-delete-note {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-items: start;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(225, 29, 72, .06);
  border: 1px solid rgba(225, 29, 72, .18);
}
html[class*="active-theme-"] md-content#content .m2-delete-note::before {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
html[class*="active-theme-"] md-content#content .m2-delete-note strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
html[class*="active-theme-"] md-content#content .m2-delete-note ul {
  grid-column: 2;
  grid-row: 2;
}
html[class*="active-theme-"] md-content#content .m2-delete-note::before {
  content: "warning";
  font-family: "Material Icons";
  font-feature-settings: "liga";
  font-weight: normal;
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(225, 29, 72, .12);
  color: #e11d48;
}
html[class*="active-theme-"] md-content#content .m2-delete-note strong {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--m2-text);
}
html[class*="active-theme-"] md-content#content .m2-delete-note ul {
  margin: 0;
  padding-left: 16px;
  color: var(--m2-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* Import opens on the form; the toggle button is unused. */
html[class*="active-theme-"] md-content#content .md-padding > div:has(> [translate="ADD_IMPORT"]),
html[class*="active-theme-"] md-content#content .md-padding > div:has(> [translate="ADD_IMPORT"]) + br {
  display: none !important;
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  html[class*="active-theme-"] {
    --m2-safe-t: max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px));
    --m2-safe-b: max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px));
    --m2-safe-l: max(env(safe-area-inset-left, 0px), var(--m2-inset-left, 0px));
    --m2-safe-r: max(env(safe-area-inset-right, 0px), var(--m2-inset-right, 0px));
  }
  html[class*="active-theme-"] header.user-styled-header {
    padding-top: var(--m2-safe-t) !important;
    padding-left: var(--m2-safe-l);
    padding-right: var(--m2-safe-r);
  }
  html[class*="active-theme-"] header.user-styled-header .MuiToolbar-root,
  html[class*="active-theme-"] header.user-styled-header .md-toolbar-tools {
    min-height: 52px;
  }
  html[class*="active-theme-"] header.user-styled-header .MuiIconButton-root,
  html[class*="active-theme-"] md-content#content .md-button.md-icon-button,
  html[class*="active-theme-"] .react-sidenav .MuiIconButton-root {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  html[class*="active-theme-"] header.user-styled-header .MuiSwitch-root .MuiIconButton-root,
  html[class*="active-theme-"] .react-sidenav .MuiSwitch-root .MuiIconButton-root {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
  }
  html[class*="active-theme-"] .react-sidenav:not(.MuiDrawer-modal),
  html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal > .MuiDrawer-paper {
    padding-top: var(--m2-safe-t);
    padding-bottom: calc(12px + var(--m2-safe-b));
    max-width: min(86vw, 320px);
    box-sizing: border-box;
  }
  html[class*="active-theme-"] .react-sidenav .MuiListItem-root {
    min-height: 48px;
  }
  html[class*="active-theme-"] md-content#content {
    padding-bottom: calc(16px + var(--m2-safe-b)) !important;
  }
  html[class*="active-theme-"] md-content#content .md-padding,
  html[class*="active-theme-"] md-content#content .layout-padding {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html[class*="active-theme-"] md-content#content md-list-item .md-list-item-text h3,
  html[class*="active-theme-"] md-content#content md-list-item .md-list-item-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[class*="active-theme-"] md-dialog {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - var(--m2-safe-t) - var(--m2-safe-b) - 16px);
  }
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen,
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  html[data-m2-app="1"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools,
  html[data-m2-app="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools,
  html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools,
  html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 4px !important;
    padding-inline-end: 12px !important;
  }
  html[data-m2-app="1"] md-dialog.md-dialog-fullscreen > md-toolbar .dialog-controls-holder,
  html[data-m2-app="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .dialog-controls-holder,
  html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen > md-toolbar .dialog-controls-holder,
  html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .dialog-controls-holder {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-inline-end: 4px !important;
  }
  html[data-m2-app="1"] md-dialog react-component[name="RComponents.ButtonWithDropdown"],
  html[data-m2-tabs="1"] md-dialog react-component[name="RComponents.ButtonWithDropdown"] {
    margin-inline-end: 2px;
    flex: 0 0 auto;
  }
  html[data-m2-app="1"] md-dialog react-component[name="RComponents.ButtonWithDropdown"] .MuiButtonGroup-root {
    animation: none;
  }
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen > md-toolbar,
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs > md-toolbar {
    padding-top: var(--m2-safe-t);
  }
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen > md-dialog-content,
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs > md-dialog-content {
    padding-bottom: calc(16px + var(--m2-safe-b));
  }
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools > h3,
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools > h3 {
    min-width: 90px;
  }
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen > md-toolbar .MuiButtonGroup-root > .MuiButton-root:first-child,
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .MuiButtonGroup-root > .MuiButton-root:first-child {
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen > md-toolbar .MuiButtonGroup-root > .MuiButton-root:first-child .MuiButton-label,
  html[class*="active-theme-"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .MuiButtonGroup-root > .MuiButton-root:first-child .MuiButton-label {
    font-size: 0;
    gap: 0;
  }
  html[class*="active-theme-"] .main-html-render-holder {
    max-width: 100%;
    overflow-x: hidden;
  }
html[class*="active-theme-"] md-content#content md-input-container,
html[class*="active-theme-"] md-content#content .md-block {
  max-width: 100%;
}
}

/* ---------- installed app (Cordova): native feel ---------- */
html[data-m2-app="1"]::before {
  content: "";
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  height: var(--m2-safe-t, max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px)));
  background: #05141f;
  pointer-events: none;
}
html[data-m2-app="1"] {
  --m2-safe-t: max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px));
  --m2-safe-b: max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px));
  --m2-app-bg: #05141f;
  --m2-app-ink: #eaf4fa;
  --m2-app-soft: #8fb3c9;
  --m2-app-line: rgba(143, 179, 201, .22);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}
/* Android keeps the system navigation bar outside the page, so the tab bar
   must not reserve that inset again or a blank band shows under the footer. */
html[data-m2-nav="sys"] {
  --m2-safe-b: 0px;
}
html[data-m2-app="1"] md-content#content > .layout-column > md-toolbar.sidenav-part,
html[data-m2-tabs="1"] md-content#content > .layout-column > md-toolbar.sidenav-part {
  box-sizing: border-box !important;
  height: calc(60px + var(--m2-safe-t, 0px)) !important;
  min-height: calc(60px + var(--m2-safe-t, 0px)) !important;
  padding-top: var(--m2-safe-t, 0px) !important;
}
html[data-m2-app="1"] md-content#content > .layout-column > md-toolbar.sidenav-part .md-toolbar-tools,
html[data-m2-tabs="1"] md-content#content > .layout-column > md-toolbar.sidenav-part .md-toolbar-tools {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding-top: 0 !important;
}
html[data-m2-app="1"] body {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
html[data-m2-app="1"] .m2-hero-aurora,
html[data-m2-app="1"] .m2-hero-blob,
html[data-m2-app="1"] .m2-hero-stars {
  display: none;
}
html[data-m2-app="1"] md-content,
html[data-m2-app="1"] .ql-editor {
  -webkit-overflow-scrolling: touch;
}
html[data-m2-app="1"] .appready-overlay {
  background:
    radial-gradient(520px 420px at 50% 40%, rgba(85, 200, 232, .18), transparent 70%),
    #05141f !important;
}
html[data-m2-app="1"] header.user-styled-header .md-button,
html[data-m2-app="1"] .react-sidenav,
html[data-m2-app="1"] md-tabs {
  -webkit-user-select: none;
  user-select: none;
}

/* web splash: same look as the web loader, held long enough to be seen */
.m2-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(520px 420px at 50% 42%, rgba(85, 200, 232, .20), transparent 70%),
    #05141f;
  color: #eaf4fa;
  transition: opacity .42s ease, visibility .42s;
}
.m2-splash.is-out {
  opacity: 0;
  visibility: hidden;
}
.m2-splash-mark {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
}
.m2-splash-mark img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  animation: m2-app-rise .55s cubic-bezier(.2, .8, .2, 1) both, m2-splash-pulse 2.4s ease-in-out .6s infinite;
}
.m2-splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(85, 200, 232, .14);
  border-top-color: #55C8E8;
  border-right-color: rgba(85, 200, 232, .55);
  animation: m2-spin 1s linear infinite;
}
.m2-splash-name {
  margin-top: 26px;
  font: 800 28px/1 "M2 Space Grotesk", "M2 Cairo", "M2 Inter", sans-serif;
  letter-spacing: .02em;
  color: #fff;
  animation: m2-app-rise .55s .08s cubic-bezier(.2, .8, .2, 1) both;
}
.m2-splash-tag {
  margin-top: 10px;
  font: 600 12px/1.4 "M2 Inter", "M2 Cairo", system-ui, sans-serif;
  letter-spacing: .08em;
  color: #8fb3c9;
  animation: m2-app-rise .55s .14s cubic-bezier(.2, .8, .2, 1) both;
}
.m2-splash-bar {
  margin-top: 30px;
  width: 140px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(85, 200, 232, .14);
}
.m2-splash-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #55C8E8, transparent);
  animation: m2-bar 1.2s ease-in-out infinite;
}
@keyframes m2-spin { to { transform: rotate(360deg); } }
@keyframes m2-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes m2-splash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85, 200, 232, .0), 0 16px 44px rgba(85, 200, 232, .25); }
  50% { box-shadow: 0 0 0 10px rgba(85, 200, 232, .08), 0 16px 54px rgba(85, 200, 232, .4); }
}

/* custom native login (drives the real CrossBox form, which stays hidden):
   dark brand canvas + light form panel, matching the web login card */
html.m2-custom-login ng-include.login-screen,
html.m2-custom-login .vibrant-background-login,
html.m2-custom-login .login-background,
html:not(.m2-stock-login) ng-include.login-screen,
html:not(.m2-stock-login) .vibrant-background-login,
html:not(.m2-stock-login) .login-background,
html[data-m2-app="1"]:not(.m2-stock-login) ng-include.login-screen,
html[data-m2-app="1"]:not(.m2-stock-login) .vibrant-background-login,
html[data-m2-app="1"]:not(.m2-stock-login) .login-background,
html[data-m2-app="1"]:not(.m2-stock-login) form.login-form {
  visibility: hidden !important;
}
html:not(.m2-stock-login):has(ng-include.login-screen),
html:not(.m2-stock-login):has(.vibrant-background-login),
html:not(.m2-stock-login):has(.login-background) {
  background: #05141f !important;
}
/* settings reuse the login-form class; only the real login screen stays hidden */
html[data-m2-app="1"] md-content#content form.login-form {
  visibility: visible !important;
}
/* the login sits above the keyboard while typing, so nothing of the app may show under it */
html.m2-custom-login nav.m2-tabbar {
  display: none !important;
}
/* the app takes CrossBox releases without asking; the dialog must never flash */
html[data-m2-native="1"] .md-dialog-container:has([translate="UI_UPDATE_TITLE2"]),
html[data-m2-native="1"] body:has([translate="UI_UPDATE_TITLE2"]) md-backdrop.md-dialog-backdrop {
  display: none !important;
}
/* iPad reports a Macintosh web view that already starts under the status bar,
   but CrossBox still adds the iPhone notch padding. Phones keep their inset. */
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios md-toolbar .md-toolbar-tools,
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios.iphone-x md-toolbar .md-toolbar-tools,
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios.iphone-x .notch-toolbar,
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios.iphone-x .MuiToolbar-regular,
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios.iphone-x .logo-and-app-name,
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios.iphone-x .see-main-menu,
html[data-m2-native="1"]:not([data-m2-app="1"]) .cordova-ios.iphone-x md-toolbar.profile-toolbar .md-toolbar-tools,
html[data-m2-native="1"]:not([data-m2-app="1"]) header.user-styled-header .md-toolbar-tools {
  padding-top: max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px)) !important;
}
/* The phone web view now starts below the status bar too, so the notch padding
   would push section titles to the bottom of their 60px bar. */
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios md-toolbar .md-toolbar-tools,
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios.iphone-x md-toolbar .md-toolbar-tools,
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios.iphone-x .notch-toolbar,
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios.iphone-x .MuiToolbar-regular,
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios.iphone-x .logo-and-app-name,
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios.iphone-x .see-main-menu,
html[data-m2-native="1"][data-m2-app="1"] .cordova-ios header.user-styled-header .md-toolbar-tools {
  padding-top: var(--m2-safe-t, 0px) !important;
}
html[data-m2-autodiscard="1"] md-dialog:has(.md-confirm-button),
html[data-m2-autodiscard="1"] md-backdrop.md-dialog-backdrop {
  opacity: 0 !important;
}
/* The boot loader is the same canvas as the login, and it leaves as soon as the card exists. */
.appready-overlay {
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(85, 200, 232, .16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 12% 80%, rgba(8, 145, 178, .20) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 60% 55%, rgba(8, 145, 178, .10) 0%, transparent 62%),
    linear-gradient(165deg, #071c2c 0%, #082233 38%, #061826 78%, #05141f 100%) !important;
}
.appready-overlay .sh1,
.appready-overlay .sh2,
.appready-overlay .lt.app-name {
  display: none !important;
}
.appready-overlay .cssloader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.appready-overlay .cssloader::before {
  content: "";
  width: 76px;
  height: 76px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: url("brand/app-mark.png") center / cover no-repeat;
  box-shadow: 0 0 0 8px rgba(85, 200, 232, .08), 0 0 0 1px rgba(85, 200, 232, .34), 0 18px 50px rgba(85, 200, 232, .34);
}
.appready-overlay .product-name-loading {
  margin: 0;
  font: 800 30px/1.05 "M2 Space Grotesk", "M2 Inter", sans-serif;
  letter-spacing: -.01em;
  color: #fff;
}
.appready-overlay .product-name-loading::after {
  content: "Intelligent Systems .. Solid Business";
  display: block;
  margin-top: 8px;
  font: 500 14px/1.45 "M2 Inter", sans-serif;
  letter-spacing: .03em;
  color: #9ec0d2;
}
html:has(#m2-login) .appready-overlay {
  display: none !important;
}
.appready-overlay .m2-boot-login {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.m2-login {
  --m2l-ink: #0b2232;
  --m2l-soft: #5b7a8c;
  --m2l-line: #d5e3ec;
  --m2l-accent: #0891B2;
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px)) + 10px);
  box-sizing: border-box;
  background:
    radial-gradient(460px 340px at 50% -6%, rgba(85, 200, 232, .32), transparent 70%),
    radial-gradient(360px 360px at 110% 30%, rgba(8, 145, 178, .20), transparent 70%),
    linear-gradient(180deg, #071c2c 0%, #05141f 70%);
  color: #eaf4fa;
  font-family: "M2 Inter", "M2 Cairo", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
.m2-login *, .m2-sheet * { box-sizing: border-box; }
.m2-login .material-icons, .m2-sheet .material-icons { font-size: 20px; line-height: 1; }
.m2-login-top {
  display: flex;
  justify-content: flex-end;
  min-height: 44px;
  padding: 0 18px;
}
.m2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 179, 201, .25);
  background: rgba(255, 255, 255, .06);
  color: #d6e6ef;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.m2-chip:active { background: rgba(85, 200, 232, .14); }
.m2-chip .material-icons { font-size: 18px; color: #8fb3c9; }
.m2-chip-auto {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(85, 200, 232, .16);
  color: #8fd8ee;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.m2-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2vh 24px 28px;
}
.m2-login-mark img {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(85, 200, 232, .08), 0 0 0 1px rgba(85, 200, 232, .34), 0 18px 50px rgba(85, 200, 232, .34);
}
.m2-login-name {
  margin-top: 16px;
  font: 800 30px/1.05 "M2 Space Grotesk", "M2 Cairo", "M2 Inter", sans-serif;
  letter-spacing: -.01em;
  color: #fff;
}
.m2-login-sub {
  margin-top: 8px;
  max-width: 300px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .03em;
  color: #55C8E8;
}
.m2-login-panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 28px 24px calc(max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px)) + 18px);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fb 100%);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .28);
  color: var(--m2l-ink);
}
.m2-login-form {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m2-login-error {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fdecec;
  border: 1px solid #f5c2c0;
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.m2-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--m2l-line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 34, 50, .04);
  transition: border-color .18s, box-shadow .18s;
}
.m2-field:focus-within {
  border-color: #2bb3d9;
  box-shadow: 0 0 0 4px rgba(43, 179, 217, .16);
}
.m2-field > .material-icons {
  flex: 0 0 auto;
  width: 48px;
  text-align: center;
  color: #7f9bab;
}
.m2-field:focus-within > .material-icons { color: var(--m2l-accent); }
.m2-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 14px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--m2l-ink);
  -webkit-text-fill-color: var(--m2l-ink);
  caret-color: var(--m2l-accent);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  -webkit-user-select: text;
  user-select: text;
}
.m2-login[dir="rtl"] .m2-field input { padding: 0 0 0 14px; }
.m2-field input:focus,
.m2-field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
.m2-field input::placeholder { color: #8aa3b2; -webkit-text-fill-color: #8aa3b2; }
.m2-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
  -webkit-text-fill-color: var(--m2l-ink);
}
.m2-eye {
  flex: 0 0 auto;
  width: 48px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #7f9bab;
}
.m2-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 2px;
  color: #33505f;
  font-size: 14px;
  font-weight: 500;
}
.m2-switch input { position: absolute; opacity: 0; pointer-events: none; }
.m2-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #c9d7e0;
  transition: background .2s;
}
.m2-switch-track span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(11, 34, 50, .25);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.m2-switch input:checked + .m2-switch-track { background: #2bb3d9; }
.m2-switch input:checked + .m2-switch-track span { transform: translateX(18px); }
.m2-login[dir="rtl"] .m2-switch-track span { left: auto; right: 3px; }
.m2-login[dir="rtl"] .m2-switch input:checked + .m2-switch-track span { transform: translateX(-18px); }
.m2-primary {
  position: relative;
  width: 100%;
  height: 54px;
  margin-top: 6px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #6fd6f0 0%, #2bb3d9 45%, #0891B2 100%);
  color: #04121c;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .03em;
  box-shadow: 0 12px 28px rgba(8, 145, 178, .30);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s;
}
.m2-primary:active { transform: scale(.985); box-shadow: 0 6px 16px rgba(8, 145, 178, .26); }
.m2-primary:disabled { opacity: .85; }
.m2-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2.5px solid rgba(4, 18, 28, .25);
  border-top-color: #04121c;
  animation: m2-spin .8s linear infinite;
}
.m2-login.is-busy .m2-primary-label { visibility: hidden; }
.m2-login.is-busy .m2-spinner { display: block; }
.m2-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: 1px solid #b9dcea;
  background: #eef8fc;
  color: #075e75;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.m2-outline .material-icons { font-size: 24px; color: var(--m2l-accent); }
.m2-outline:active { background: #dff1f8; }
.m2-text {
  align-self: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--m2l-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.m2-text:active { background: rgba(8, 145, 178, .08); }
.m2-login-foot {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.m2-trial {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  color: var(--m2l-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.m2-trial b { display: block; margin-top: 2px; color: var(--m2l-accent); font-size: 14px; font-weight: 700; }
.m2-secured {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8aa3b2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
.m2-secured .material-icons { font-size: 14px; }

/* tablets / wide windows: centered card on the dark canvas */
@media (min-width: 761px) {
  .m2-login {
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
  }
  .m2-login-top {
    position: absolute;
    top: calc(max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px)) + 16px);
    right: 16px;
    padding: 0;
  }
  .m2-login[dir="rtl"] .m2-login-top { right: auto; left: 16px; }
  .m2-login-brand { padding: 0 0 26px; }
  .m2-login-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
    padding: 32px 32px 22px;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}
@media (min-width: 761px) and (max-height: 640px) {
  .m2-login { justify-content: flex-start; }
}

/* hero background, same layers as the m2.ist hero: soft binary floor, aurora, blobs, stars */
.m2-splash,
.m2-login {
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(85, 200, 232, .16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 12% 80%, rgba(8, 145, 178, .20) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 60% 55%, rgba(8, 145, 178, .10) 0%, transparent 62%),
    linear-gradient(165deg, #071c2c 0%, #082233 38%, #061826 78%, #05141f 100%) !important;
}
.m2-hero-bg {
  position: fixed;
  inset: 0;
  z-index: -1 !important;
  overflow: hidden;
  pointer-events: none;
}
.m2-hero-bg > i { position: absolute; display: block; }
.m2-hero-binary {
  inset: 0;
  background: url("brand/binary.svg") no-repeat bottom center / 100% auto;
  opacity: .1;
  mix-blend-mode: screen;
}
.m2-hero-aurora {
  inset: -25% -10%;
  background: conic-gradient(from 200deg at 50% 42%, transparent 0deg, rgba(85, 200, 232, .12) 65deg, rgba(8, 145, 178, .16) 150deg, rgba(85, 200, 232, .1) 235deg, transparent 320deg);
  filter: blur(20px);
  opacity: .8;
  mix-blend-mode: screen;
  animation: m2-aurora-spin 34s linear infinite;
}
.m2-hero-blob {
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  animation: m2-blob-drift 20s ease-in-out infinite alternate;
}
.m2-hero-blob-1 { width: 480px; height: 420px; top: -6%; right: -4%; background: radial-gradient(circle, rgba(85, 200, 232, .42) 0%, transparent 70%); }
.m2-hero-blob-2 { width: 460px; height: 400px; bottom: 0; left: -6%; background: radial-gradient(circle, rgba(8, 145, 178, .42) 0%, transparent 70%); animation-delay: -8s; }
.m2-hero-stars {
  inset: 0;
  background-image:
    radial-gradient(3px 3px at 8% 12%, rgba(200, 240, 255, .95), transparent),
    radial-gradient(2.2px 2.2px at 24% 8%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 42% 15%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 58% 28%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 74% 24%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 91% 19%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 12% 48%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(3px 3px at 63% 44%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(2.2px 2.2px at 5% 62%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 47% 58%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(3px 3px at 93% 61%, rgba(200, 240, 255, .95), transparent),
    radial-gradient(3px 3px at 39% 90%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(2.2px 2.2px at 80% 86%, rgba(200, 240, 255, .8), transparent);
  filter: drop-shadow(0 0 3px rgba(150, 225, 255, .9));
  animation: m2-star-twinkle 5.5s ease-in-out infinite alternate;
}
.m2-hero-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.2px 2.2px at 17% 34%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(3px 3px at 31% 22%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(3px 3px at 51% 6%, rgba(200, 240, 255, .95), transparent),
    radial-gradient(3px 3px at 67% 11%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(3px 3px at 83% 9%, rgba(200, 240, 255, .95), transparent),
    radial-gradient(3px 3px at 96% 33%, rgba(255, 255, 255, .95), transparent),
    radial-gradient(2.2px 2.2px at 36% 41%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 88% 46%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(3px 3px at 22% 70%, rgba(200, 240, 255, .95), transparent),
    radial-gradient(2.2px 2.2px at 71% 66%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 15% 84%, rgba(200, 240, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 56% 79%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(2.2px 2.2px at 97% 77%, rgba(200, 240, 255, .8), transparent);
  animation: m2-star-twinkle 4s ease-in-out -2s infinite alternate-reverse;
}
@keyframes m2-aurora-spin { to { transform: rotate(360deg); } }
@keyframes m2-blob-drift { to { transform: translate(26px, -20px) scale(1.08); } }
@keyframes m2-star-twinkle { 0% { opacity: 1; } 100% { opacity: .35; } }
@media (max-width: 760px) {
  .m2-login .m2-hero-binary { bottom: auto; height: 48vh; background-size: cover; opacity: .14; }
  .m2-hero-blob-1 { width: 300px; height: 280px; }
  .m2-hero-blob-2 { width: 280px; height: 260px; top: 18%; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-hero-aurora, .m2-hero-blob, .m2-hero-stars { animation: none; }
}

/* whole login uses the webmail font (Space Grotesk, Cairo for Arabic) without relying on the global theme rule */
html #m2-login,
html #m2-login *:not(.material-icons),
html .m2-sheet,
html .m2-sheet *:not(.material-icons),
html #m2-splash .m2-splash-tag {
  font-family: "M2 Space Grotesk", "M2 Cairo", "M2 Inter", sans-serif !important;
}
html #m2-login .m2-primary,
html .m2-sheet .m2-primary { font-weight: 700; }

/* wordmark: same as the box.m2.ist hero title (Orbitron + sparkle); ids beat the global theme font rule */
html #m2-login .m2-login-name,
html #m2-splash .m2-splash-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32em;
  direction: ltr;
  font-family: "M2 Orbitron", "M2 Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  text-shadow: 0 6px 30px rgba(85, 200, 232, .25);
}
.m2-login-name { font-size: 30px !important; }
.m2-splash-name { font-size: 26px !important; }
.m2-sparkle {
  width: .9em;
  height: .9em;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(85, 200, 232, .55));
}

.m2-login-mark img { width: 88px; height: 88px; }
.m2-login-sub { font-size: 14.5px; font-weight: 600; }
.m2-login-panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 -18px 60px rgba(2, 10, 18, .45), 0 0 0 1px rgba(85, 200, 232, .12);
}
.m2-login-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, #55C8E8, #0891B2, transparent);
}
@media (min-width: 761px) {
  .m2-login-panel {
    box-shadow: 0 40px 100px rgba(2, 10, 18, .6), 0 0 0 1px rgba(85, 200, 232, .14), 0 0 80px rgba(85, 200, 232, .12);
  }
}

/* bottom sheet (language picker, biometric offer) */
.m2-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  font-family: "M2 Inter", "M2 Cairo", system-ui, -apple-system, sans-serif;
}
.m2-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 14, .55);
  opacity: 0;
  transition: opacity .25s;
}
.m2-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 72vh;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 8px 18px calc(max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px)) + 16px);
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: #0b2232;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .25);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.m2-sheet.is-open .m2-sheet-scrim { opacity: 1; }
.m2-sheet.is-open .m2-sheet-panel { transform: none; }
.m2-sheet-grip {
  align-self: center;
  width: 38px;
  height: 4px;
  margin: 4px 0 14px;
  border-radius: 4px;
  background: #c9d7e0;
}
.m2-sheet-title {
  padding: 0 6px 10px;
  font: 800 18px/1.2 "M2 Space Grotesk", "M2 Cairo", "M2 Inter", sans-serif;
}
.m2-sheet-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.m2-sheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #0b2232;
  text-align: start;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.m2-sheet-item small { flex: 1 1 auto; color: #7f9bab; font-size: 12px; font-weight: 500; }
.m2-sheet-item .material-icons { color: #0891B2; }
.m2-sheet-item.is-on { background: #eaf6fb; }
.m2-sheet-item:active { background: #dff1f8; }
.m2-sheet-auto > .material-icons:first-child { color: #5b7a8c; }
.m2-sheet-sep {
  height: 1px;
  margin: 6px 10px;
  background: #e3ecf1;
}
.m2-sheet-ask { align-items: stretch; text-align: center; }
.m2-sheet-ask p { margin: 0 6px 18px; color: #4d6b7c; font-size: 14px; line-height: 1.5; }
.m2-ask-icon {
  align-self: center;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 4px 0 12px;
  border-radius: 50%;
  background: #e6f5fb;
  box-shadow: 0 0 0 1px #bfe3f0;
}
.m2-ask-icon .material-icons { font-size: 34px; color: #0891B2; }
.m2-sheet-ask .m2-text { margin-top: 6px; }
/* wide screens: language picker drops down under the chip, other sheets become a centered dialog */
@media (min-width: 761px) {
  .m2-sheet-scrim { background: rgba(2, 8, 14, .25); }
  .m2-sheet-grip { display: none; }
  .m2-sheet-panel {
    padding: 14px 10px 10px;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(11, 34, 50, .06);
    opacity: 0;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s;
  }
  .m2-sheet.is-open .m2-sheet-panel { opacity: 1; }
  .m2-sheet-menu .m2-sheet-panel {
    top: calc(max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px)) + 60px);
    right: 16px;
    left: auto;
    bottom: auto;
    width: 300px;
    max-height: min(70vh, 520px);
    margin: 0;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
  }
  .m2-sheet-menu[dir="rtl"] .m2-sheet-panel { right: auto; left: 16px; transform-origin: top left; }
  .m2-sheet-menu .m2-sheet-title { padding: 0 10px 8px; font-size: 15px; }
  .m2-sheet-menu .m2-sheet-item { min-height: 44px; font-size: 14px; }
  .m2-sheet:not(.m2-sheet-menu) .m2-sheet-panel {
    top: 50%;
    bottom: auto;
    width: 400px;
    padding: 24px 22px 18px;
    transform: translateY(-46%) scale(.98);
  }
  .m2-sheet:not(.m2-sheet-menu).is-open .m2-sheet-panel { transform: translateY(-50%); }
}
@keyframes m2-panel-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* stock form fallback (reset password / external account): keep it clear of the status bar */
html[data-m2-app="1"]:not(.m2-custom-login) .vibrant-background-login,
html[data-m2-app="1"]:not(.m2-custom-login) .login-background {
  padding-top: calc(max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px)) + 16px) !important;
}
@keyframes m2-app-rise {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* ---------- minimized windows dock ---------- */
html[class*="active-theme-"] .minimize-dialog-container {
  height: 56px;
  overflow: visible;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  /* CrossBox slides this bar off-screen (translateY 36px) until the pointer nears the bottom edge. */
  transform: none !important;
}
html[class*="active-theme-"] .has-minimized-dialogs .minimize-padding,
html[class*="active-theme-"] .has-minimized-dialogs .md-dialog-content-body {
  padding-bottom: 56px;
}
html[class*="active-theme-"] .minimize-table-cell {
  width: 232px;
  height: 56px;
  vertical-align: middle;
}
html[class*="active-theme-"] .minimize-item-container {
  height: 56px;
}
html[class*="active-theme-"] minimize-dialog-container-item.minimized-dialog {
  top: 10px;
  left: 8px;
  width: 216px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(85, 200, 232, .28);
  border-top: 2px solid #55C8E8;
  background: linear-gradient(180deg, #0c2c48 0%, #05141f 100%) !important;
  color: #e7f3fa !important;
  box-shadow: 0 8px 22px rgba(5, 20, 31, .28);
  overflow: hidden;
  pointer-events: auto;
}
html[class*="active-theme-"] body:not(.light-mode) minimize-dialog-container-item.minimized-dialog {
  background: linear-gradient(180deg, #16385a 0%, #0c2438 100%) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
html[class*="active-theme-"] minimize-dialog-container-item.minimized-dialog:hover {
  border-color: rgba(85, 200, 232, .7);
}
html[class*="active-theme-"] minimize-dialog-container-item.minimized-dialog.dialog-maximized {
  box-shadow: 0 0 0 2px rgba(85, 200, 232, .35), 0 8px 22px rgba(5, 20, 31, .28);
}
html[class*="active-theme-"] minimize-dialog-container-item.minimized-dialog > span,
html[class*="active-theme-"] minimize-dialog-container-item.minimized-dialog .layout-row {
  display: flex;
  align-items: center;
  height: 34px;
  width: 100%;
}
html[class*="active-theme-"] .minimize-inner-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
}
html[class*="active-theme-"] .minimize-inner-close md-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  font-size: 16px;
  color: rgba(231, 243, 250, .7) !important;
}
html[class*="active-theme-"] .minimize-inner-close:hover {
  background: rgba(225, 29, 72, .85);
}
html[class*="active-theme-"] .minimize-inner-close:hover md-icon {
  color: #fff !important;
}
html[class*="active-theme-"] .minimize-inner-title {
  width: auto;
  min-width: 0;
  padding: 0 12px 0 0;
  line-height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e7f3fa !important;
}
html[class*="active-theme-"] .minimize-inner-title .ellipsis {
  line-height: 34px;
}

/* Files unpacked from an Outlook winmail.dat, shown under the original card. */
html[class*="active-theme-"] .m2-tnef {
  flex: 1 0 100%;
  box-sizing: border-box;
  margin: 4px 8px 14px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(85, 200, 232, .35);
  background: #fff;
  color: #0c2438;
}
html[class*="active-theme-"] body:not(.light-mode) .m2-tnef {
  background: linear-gradient(180deg, #0c2c48 0%, #05141f 100%);
  color: #e7f3fa;
}
html[class*="active-theme-"] .m2-tnef-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #0891b2;
  margin-bottom: 8px;
}
html[class*="active-theme-"] body:not(.light-mode) .m2-tnef-label {
  color: #55c8e8;
}
html[class*="active-theme-"] .m2-tnef-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html[class*="active-theme-"] .m2-tnef-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid rgba(8, 145, 178, .28);
  background: #f4fbfd;
  color: #0c2438;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  text-align: start;
}
html[class*="active-theme-"] body:not(.light-mode) .m2-tnef-file {
  border-color: rgba(85, 200, 232, .28);
  background: rgba(255, 255, 255, .05);
  color: #e7f3fa;
}
html[class*="active-theme-"] .m2-tnef-file:hover {
  border-color: #0891b2;
}
html[class*="active-theme-"] .m2-tnef-name {
  font-weight: 650;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
html[class*="active-theme-"] .m2-tnef-size {
  font-size: 12px;
  opacity: .7;
  flex: 0 0 auto;
}

/* Phone dashboard: one scrolling column, cards as tall as their content. */
@media (max-width: 760px) {
  html[class*="active-theme-"] .react-grid-layout {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    height: auto !important;
    min-height: 0 !important;
    margin: 4px 0 8px;
  }
  html[class*="active-theme-"] .react-grid-item {
    position: relative !important;
    transform: none !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  html[class*="active-theme-"] .react-grid-item.MuiCard-root {
    overflow: hidden;
  }
  html[class*="active-theme-"] .react-grid-item .react-resizable-handle {
    display: none !important;
  }
  /* Virtual lists collapse without a real height, so each card keeps a phone-sized window. */
  html[class*="active-theme-"] .react-grid-item .MuiCardContent-root {
    height: 300px !important;
    min-height: 300px !important;
    overflow: hidden !important;
  }
  html[class*="active-theme-"] .react-grid-item .MuiCardContent-root > div:not(.m2-whead) {
    height: calc(100% - 52px) !important;
    min-height: 220px !important;
    overflow: auto !important;
  }
  html[class*="active-theme-"] md-content#content .react-grid-item md-list-item .md-list-item-text h3,
  html[class*="active-theme-"] md-content#content .react-grid-item md-list-item .md-list-item-text p,
  html[class*="active-theme-"] .react-grid-item .MuiListItemText-primary,
  html[class*="active-theme-"] .react-grid-item .MuiListItemText-secondary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  html[class*="active-theme-"] .react-grid-item md-list-item,
  html[class*="active-theme-"] .react-grid-item .MuiListItem-root {
    min-height: 64px;
  }
  html[class*="active-theme-"] md-content#content {
    padding-bottom: calc(96px + var(--m2-safe-b)) !important;
  }
}

/* Platform home: email, chat, and files as the front door. */
html[class*="active-theme-"] .m2-doors {
  margin: 6px 4px 18px;
}
html[class*="active-theme-"] .m2-doors-kicker {
  margin: 2px 6px 12px;
  font-family: var(--m2-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-doors-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
html[class*="active-theme-"] .m2-door {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--m2-border);
  border-radius: 18px;
  background: var(--m2-card);
  box-shadow: var(--m2-shadow);
  color: var(--m2-text);
  font-family: var(--m2-font);
  text-align: start;
  cursor: pointer;
}
html[class*="active-theme-"] .m2-door:hover {
  border-color: #b7e4f2;
  box-shadow: var(--m2-shadow-hover);
}
html[class*="active-theme-"] .m2-door-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: var(--m2-light);
  color: var(--m2-dark);
}
html[class*="active-theme-"] .m2-door-copy {
  min-width: 0;
  flex: 1;
}
html[class*="active-theme-"] .m2-door-title {
  display: block;
  font-family: var(--m2-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-door-line {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--m2-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  html[class*="active-theme-"] .m2-doors-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  html[class*="active-theme-"] .m2-door {
    min-height: 76px;
    padding: 14px 16px;
  }
  html[data-m2-doors="1"][class*="active-theme-"] md-content#content .react-grid-layout {
    display: none !important;
  }
}

/* Stock dashboard title stays on screen while the page loads. Show Loading until our header is up. */
html[data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h2,
html[data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h3,
html[data-m2-home="1"]:not([data-m2-mhead="1"]) [translate="DASHBOARD"]:not(md-dialog *) {
  font-size: 0 !important;
  color: transparent !important;
}
html[data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h2 *,
html[data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h3 *,
html[data-m2-home="1"]:not([data-m2-mhead="1"]) [translate="DASHBOARD"]:not(md-dialog *) * {
  font-size: 0 !important;
  color: transparent !important;
}
html[data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h2::after,
html[data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h3::after,
html[data-m2-home="1"]:not([data-m2-mhead="1"]) [translate="DASHBOARD"]:not(md-dialog *)::after {
  content: "Loading" !important;
  font-size: 19px !important;
  line-height: 24px !important;
  color: #143044 !important;
}
html[dir="rtl"][data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h2::after,
html[dir="rtl"][data-m2-home="1"]:not([data-m2-mhead="1"]) md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools h3::after,
html[dir="rtl"][data-m2-home="1"]:not([data-m2-mhead="1"]) [translate="DASHBOARD"]:not(md-dialog *)::after {
  content: "\062c\0627\0631\064a \0627\0644\062a\062d\0645\064a\0644" !important;
}
html[data-m2-mhead="1"] md-toolbar:has([data-m2-boot]) { display: none !important; }
/* Home: our own email-first page. CrossBox widgets stay rendered offscreen as the data source. */
html[data-m2-home="1"] md-content#content .react-grid-layout {
  position: absolute !important;
  inset-inline-start: -20000px !important;
  top: 0 !important;
  width: 1100px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html[data-m2-home="1"] md-content#content button.md-fab.md-secondary:not(.bkg-activities),
html[data-m2-home="1"] md-content#content md-fab-speed-dial { display: none !important; }
/* Chat's New channel control lives in the drawer, not on the dashboard canvas. */
html[class*="active-theme-"] .react-sidenav md-fab-speed-dial.md-fab-bottom-right {
  display: flex !important;
  z-index: 12 !important;
}
html[class*="active-theme-"]:not([data-m2-tabs="1"]):not([data-m2-app="1"]) .react-sidenav md-fab-speed-dial.md-fab-bottom-right {
  position: absolute !important;
  top: auto !important;
  right: 16px !important;
  bottom: 16px !important;
  left: auto !important;
}
html[data-m2-home="1"] .react-sidenav md-fab-speed-dial > md-fab-trigger > button.md-fab.md-secondary {
  display: inline-flex !important;
}
html[data-m2-home="1"] md-content#content { position: relative; }

.m2h {
  --h-ok: #10b981;
  --h-warn: #f59e0b;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 26px 30px;
  font-family: var(--m2-font);
  color: var(--m2-text);
}
.m2h button { font: inherit; color: inherit; cursor: pointer; }
.m2h svg { width: 20px; height: 20px; flex: 0 0 auto; }
.m2h-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.m2h-hello { min-width: 0; }
.m2h-hello h1 { margin: 0; font-family: var(--m2-font-display); font-size: 26px; font-weight: 600; color: var(--m2-text); }
.m2h-hello p { margin: 4px 0 0; color: var(--m2-dark); font-size: 14.5px; font-weight: 600; }
.m2h-search {
  margin-inline-start: auto; width: 360px; max-width: 40%;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--m2-border); border-radius: 14px;
  background: var(--m2-card) !important; color: var(--m2-muted) !important; font-size: 14px; text-align: start;
}
.m2h-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-compose {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 40px; padding: 0 16px 0 6px; border: 0; border-radius: 999px;
  background: var(--m2-grad) !important; color: var(--m2-ink) !important; font-weight: 700;
}
.m2h-ask, .m2-head-ask {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 40px; padding: 0 14px 0 4px; border: 1px solid var(--m2-border); border-radius: 999px;
  background: var(--m2-card); color: var(--m2-text); font: 700 14px/1 var(--m2-font); cursor: pointer;
}
.m2h-ask .m2h-ico, .m2-head-ask .m2h-ico { width: 34px; height: 34px; }
.m2h-top .m2h-ask .m2h-ico { background: transparent; }

.m2h-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.m2h-card {
  background: var(--m2-card); border: 1px solid var(--m2-border); border-radius: 18px;
  box-shadow: var(--m2-shadow); min-width: 0;
}
.m2h-mail { grid-column: span 8; display: flex; flex-direction: column; }
.m2h-side { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.m2h-chat, .m2h-files, .m2h-safe { grid-column: span 4; }
.m2h-help { grid-column: span 12; display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.m2h-help p { margin: 0; flex: 1; color: var(--m2-muted); font-size: 14px; }
.m2h-help p b { color: var(--m2-text); }

.m2h-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.m2h-head h2 { margin: 0; font-family: var(--m2-font-display); font-size: 16.5px; font-weight: 600; color: var(--m2-text); }
.m2h-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--m2-light); color: var(--m2-dark); }
.m2h-ico svg { width: 19px; height: 19px; }
.m2h-pill { padding: 2px 10px; border-radius: 999px; background: var(--m2-light); color: var(--m2-dark); font-size: 12px; font-weight: 700; }
.m2h-link {
  margin-inline-start: auto; padding: 0; border: 0; background: none !important;
  color: var(--m2-dark) !important; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.m2h-empty { margin: 0; padding: 8px 18px 18px; color: var(--m2-muted); font-size: 13.5px; }

.m2h-list, .m2h-mini, .m2h-today, .m2h-checks { list-style: none; margin: 0; }
.m2h-list { padding: 0 8px 4px; flex: 1; }
.m2h-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 10px; border: 0; border-radius: 12px; background: none; text-align: start;
}
.m2h-row:hover { background: var(--m2-hover); }
.m2h-av {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: var(--m2-grad); color: #fff; font-size: 15px; font-weight: 700;
}
.m2h-av.b { background: linear-gradient(135deg, #818cf8, #0891b2); }
.m2h-av.c { background: linear-gradient(135deg, #34d399, #0891b2); }
.m2h-av.d { background: linear-gradient(135deg, #fbbf24, #f97316); }
.m2h-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m2h-r1 { display: flex; align-items: baseline; gap: 8px; }
.m2h-from { font-size: 14.5px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-time { margin-inline-start: auto; flex: 0 0 auto; color: var(--m2-muted); font-size: 12.5px; white-space: nowrap; }
.m2h-subj { font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-new {
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: .02em;
}
.m2h-row.is-new { background: rgba(225, 29, 72, .07); }
.m2h-row.is-new .m2h-from,
.m2h-row.is-new .m2h-subj { font-weight: 800; color: var(--m2-text); }
.m2h-row:not(.is-new) .m2h-from,
.m2h-row:not(.is-new) .m2h-subj { font-weight: 500; color: var(--m2-muted); }
.m2h-snip { color: var(--m2-muted); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-more {
  margin: 4px 16px 16px; padding: 11px; border: 1px solid var(--m2-border); border-radius: 12px;
  background: var(--m2-bg) !important; color: var(--m2-dark) !important; font-weight: 700;
}

.m2h-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 16px 16px; }
.m2h-quick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px 12px; border: 1px solid var(--m2-border); border-radius: 14px;
  background: var(--m2-bg) !important; font-size: 13.5px; font-weight: 600; text-align: start;
}
.m2h-quick button:hover { border-color: #b7e4f2; }
.m2h-quick svg { width: 22px; height: 22px; color: var(--m2-dark); }
.m2h-today { padding: 0 18px 16px; }
.m2h-today li { padding: 10px 0; border-top: 1px solid var(--m2-border); font-size: 13.5px; }
.m2h-today li:first-child { border-top: 0; }
.m2h-today b { display: block; color: var(--m2-dark); font-size: 12px; }

.m2h-mini { padding: 0 8px 12px; }
.m2h-mini .m2h-row { padding: 9px 10px; }
.m2h-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-t span { display: block; color: var(--m2-muted); font-size: 12.5px; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-file { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: #64748b; color: #fff; font-size: 10.5px; font-weight: 700; }
.m2h-file.x-xls, .m2h-file.x-xlsx, .m2h-file.x-csv { background: #16a34a; }
.m2h-file.x-pdf { background: #dc2626; }
.m2h-file.x-doc, .m2h-file.x-docx { background: #2563eb; }
.m2h-file.x-ppt, .m2h-file.x-pptx { background: #ea580c; }
.m2h-file.dir { background: var(--m2-dark); }
.m2h-file svg { width: 18px; height: 18px; }

.m2h-shield {
  display: flex; align-items: center; gap: 12px; margin: 4px 16px 10px; padding: 12px;
  border-radius: 14px; background: rgba(16, 185, 129, .08); color: #047857; font-size: 14px; font-weight: 700;
}
body:not(.light-mode) .m2h-shield { color: #6ee7b7; }
.m2h-shield svg { width: 26px; height: 26px; }
.m2h-shield small { display: block; margin-top: 2px; color: var(--m2-muted); font-size: 12px; font-weight: 500; }
.m2h-checks { padding: 0 18px 14px; font-size: 13.5px; }
.m2h-checks li { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.m2h-checks li::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--h-ok); }
.m2h-checks li.warn::before { background: var(--h-warn); }
.m2h-checks li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m2h-phone { display: none; }

@media (max-width: 1100px) {
  .m2h-mail, .m2h-side { grid-column: span 12; }
  .m2h-side { flex-direction: row; }
  .m2h-side > * { flex: 1; }
}

/* Bottom bar, phone and app only. */
.m2-tabbar {
  display: none;
  position: fixed;
  z-index: 20;
  inset-inline: 0;
  bottom: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  padding: 4px 0 calc(4px + var(--m2-safe-b, 0px));
  background: var(--m2-card);
  border-top: 1px solid var(--m2-border);
  box-shadow: 0 -10px 28px rgba(5, 20, 31, .06);
  font-family: var(--m2-font);
}
body:not(.light-mode) .m2-tabbar { box-shadow: 0 -10px 28px rgba(0, 0, 0, .35); }
.m2-tab {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  color: var(--m2-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}
.m2-tab-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 0 4px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.m2-tab svg, .m2-tab .material-icons { width: 22px; height: 22px; font-size: 22px; line-height: 22px; }
.m2-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-tab.on { color: #0891b2; font-weight: 700; }
.m2-tab.on .m2-tab-face { background: none; box-shadow: none; }
.m2-tab.on .m2-tab-face::after {
  content: "";
  display: block;
  width: 16px;
  height: 3px;
  margin-top: 2px;
  border-radius: 99px;
  background: #0891b2;
}
.m2-tab.on svg,
.m2-tab.on .material-icons {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 22px;
  line-height: 22px;
  color: #0891b2;
}
body:not(.light-mode) .m2-tab.on,
body:not(.light-mode) .m2-tab.on .material-icons,
body:not(.light-mode) .m2-tab.on svg { color: #67e8f9; }
body:not(.light-mode) .m2-tab.on .m2-tab-face { background: none; box-shadow: none; }
body:not(.light-mode) .m2-tab.on .m2-tab-face::after { background: #67e8f9; }
.m2-tab[data-m2-tab="menu"] { display: none; }
/* Tablet and unfolded foldables (761-1099px): the tab bar becomes a side rail. */
html[data-m2-rail="1"] .m2-tabbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 80px;
  padding: calc(10px + var(--m2-safe-t, 0px)) 0 calc(12px + var(--m2-safe-b, 0px));
  padding-inline-start: var(--m2-safe-l, 0px);
  box-sizing: content-box;
  border-top: 0;
  border-inline-end: 1px solid var(--m2-border);
  box-shadow: none;
}
html[data-m2-rail="1"] .m2-tab[data-m2-tab="menu"] { display: flex; margin-bottom: 10px; }
html[data-m2-rail="1"] .m2-tab { width: 80px; }
html[data-m2-rail="1"] .m2-tab-face { gap: 4px; padding: 2px 0 4px; }
html[data-m2-rail="1"] .m2-tab .material-icons,
html[data-m2-rail="1"] .m2-tab svg {
  box-sizing: border-box;
  width: 56px;
  height: 32px;
  padding: 5px 0;
  border-radius: 16px;
  text-align: center;
  transition: background-color .18s ease;
}
html[data-m2-rail="1"] .m2-tab:hover .material-icons,
html[data-m2-rail="1"] .m2-tab:hover svg { background: var(--m2-hover); }
html[data-m2-rail="1"] .m2-tab.on .material-icons,
html[data-m2-rail="1"] .m2-tab.on svg {
  width: 56px;
  height: 32px;
  padding: 5px 0;
  border-radius: 16px;
  background: var(--m2-selected);
}
html[data-m2-rail="1"] .m2-tab.on .m2-tab-face::after { display: none; }
html[data-m2-rail="1"] .m2-tab-badge { top: -2px; margin-inline-start: 12px; }
html[data-m2-rail="1"] .main-sidenav-menu-icon,
html[data-m2-rail="1"] .m2-head-menu { display: none !important; }
html[data-m2-rail="1"] md-toolbar .md-toolbar-tools > h3.ellipsis { flex: 0 1 auto; min-width: 56px; max-width: 40%; }
html[data-m2-rail="1"] #main {
  box-sizing: border-box;
  padding-inline-start: calc(80px + var(--m2-safe-l, 0px));
}
/* Desktop app (Electron). Chrome areas never select text like a web page. */
html[data-m2-shell] .react-sidenav,
html[data-m2-shell] .m2-tabbar,
html[data-m2-shell] #layout-content-only .MuiToolbar-root,
html[data-m2-shell] #layout-content-only md-toolbar { -webkit-user-select: none; user-select: none; }
html[data-m2-shell] #layout-content-only md-toolbar input { -webkit-user-select: text; user-select: text; }
/* Mac: the traffic lights float over the top-left corner (titleBarStyle hiddenInset).
   The left nav and the rail keep a 30px strip for them; empty toolbar space drags the window. */
html[data-m2-shell="mac"] .react-sidenav .drawer-condensed { padding-top: 30px; box-sizing: border-box; }
html[data-m2-shell="mac"] .react-sidenav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 5;
  -webkit-app-region: drag;
}
html[data-m2-shell="mac"][data-m2-rail="1"] .m2-tabbar { padding-top: 40px; }
html[data-m2-shell="mac"] #layout-content-only .MuiToolbar-root,
html[data-m2-shell="mac"] #layout-content-only md-toolbar:not(md-dialog md-toolbar) { -webkit-app-region: drag; }
html[data-m2-shell="mac"] #layout-content-only .MuiToolbar-root > *,
html[data-m2-shell="mac"] #layout-content-only md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > * { -webkit-app-region: no-drag; }
html[data-m2-shell="mac"][dir="rtl"] #layout-content-only .MuiToolbar-root,
html[data-m2-shell="mac"][dir="rtl"] #layout-content-only md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools,
html[data-m2-shell="mac"]:has(body[dir="rtl"]) #layout-content-only .MuiToolbar-root,
html[data-m2-shell="mac"]:has(body[dir="rtl"]) #layout-content-only md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools { padding-left: 84px; }
/* The original left nav is the foundation. It paints over the bottom bar. */
html[data-m2-tabs="1"] .MuiDrawer-root.react-sidenav,
html[data-m2-tabs="1"] .react-sidenav.MuiDrawer-paper,
html[data-m2-tabs="1"] .MuiDrawer-root.react-sidenav > .MuiDrawer-paper {
  z-index: 80 !important;
}
html[data-m2-tabs="1"] .md-dialog-container,
html[data-m2-app="1"] .md-dialog-container,
html[data-m2-tabs="1"] md-backdrop.md-dialog-backdrop,
html[data-m2-app="1"] md-backdrop.md-dialog-backdrop,
html[data-m2-tabs="1"] .md-dialog-backdrop,
html[data-m2-app="1"] .md-dialog-backdrop {
  z-index: 90 !important;
}
.m2-tab-badge {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  margin-inline-start: 8px;
  padding: 0 5px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
}
/* Phone action buttons stay square. Desktop keeps the wide pill. */
html[data-m2-app="1"] .md-fab.md-fab-bottom-right,
html[data-m2-tabs="1"] .md-fab.md-fab-bottom-right,
html[data-m2-app="1"] md-fab-speed-dial.md-fab-bottom-right,
html[data-m2-tabs="1"] md-fab-speed-dial.md-fab-bottom-right {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: calc(84px + var(--m2-safe-b, 0px)) !important;
  width: auto !important;
  height: auto !important;
  z-index: 36 !important;
}
html[data-m2-app="1"] button.md-fab.md-fab-bottom-right,
html[data-m2-tabs="1"] button.md-fab.md-fab-bottom-right,
html[data-m2-app="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab,
html[data-m2-tabs="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
html[data-m2-app="1"] button.md-fab.md-fab-bottom-right,
html[data-m2-tabs="1"] button.md-fab.md-fab-bottom-right {
  position: fixed !important;
  left: auto !important;
  right: 16px !important;
  bottom: calc(84px + var(--m2-safe-b, 0px)) !important;
}
html[data-m2-app="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab,
html[data-m2-tabs="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}
html[data-m2-app="1"] button.md-fab.md-fab-bottom-right .textual-fab-text,
html[data-m2-tabs="1"] button.md-fab.md-fab-bottom-right .textual-fab-text,
html[data-m2-app="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab .textual-fab-text,
html[data-m2-tabs="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab .textual-fab-text {
  display: none !important;
}
html[data-m2-app="1"] button.md-fab.md-fab-bottom-right md-icon,
html[data-m2-tabs="1"] button.md-fab.md-fab-bottom-right md-icon,
html[data-m2-app="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab md-icon,
html[data-m2-tabs="1"] md-fab-speed-dial > md-fab-trigger > button.md-fab md-icon {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  line-height: 24px !important;
  font-size: 24px !important;
  transform: none !important;
}
html[data-m2-app="1"] md-fab-speed-dial:not(.md-is-open) > md-fab-actions,
html[data-m2-tabs="1"] md-fab-speed-dial:not(.md-is-open) > md-fab-actions {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html[data-m2-app="1"] md-fab-speed-dial.md-is-open > md-fab-actions,
html[data-m2-tabs="1"] md-fab-speed-dial.md-is-open > md-fab-actions {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: absolute !important;
  right: 0;
  bottom: 64px;
  width: max-content !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2;
  animation: m2dial .16s ease;
}
@keyframes m2dial {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
html[data-m2-app="1"] button.md-fab.bkg-activities,
html[data-m2-tabs="1"] button.md-fab.bkg-activities {
  position: fixed !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  left: 16px !important;
  right: auto !important;
  bottom: calc(84px + var(--m2-safe-b, 0px)) !important;
  z-index: 36 !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  overflow: visible !important;
  border-radius: 16px !important;
}
.m2-home-fab {
  position: fixed;
  z-index: 41;
  inset-inline-end: 18px;
  bottom: calc(84px + var(--m2-safe-b, 0px));
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: var(--m2-grad);
  color: #05141f;
  box-shadow: 0 10px 24px rgba(8, 145, 178, .35);
}
.m2-home-fab svg { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .m2-tabbar { display: grid; }
  html[data-m2-tabs="1"] md-content#content {
    height: calc(100dvh - 74px) !important;
    max-height: calc(100dvh - 74px) !important;
    padding-bottom: 0 !important;
  }
  html[data-m2-tabs="1"][data-m2-chrome="off"] md-content#content {
    height: 100% !important;
    max-height: none !important;
    padding-bottom: 0 !important;
  }
  html[data-m2-tabs="1"] button.md-fab.md-secondary:not(md-fab-speed-dial button),
  html[data-m2-tabs="1"] md-content#content .md-fab-bottom-right,
  html[data-m2-tabs="1"] md-content#content md-fab-speed-dial,
  html[data-m2-tabs="1"] md-content#content .md-fab-speed-dial {
    bottom: calc(80px + var(--m2-safe-b, 0px)) !important;
    z-index: 35 !important;
  }
  html[data-m2-tabs="1"][data-m2-chrome="off"] button.md-fab.md-secondary:not(md-fab-speed-dial button),
  html[data-m2-tabs="1"][data-m2-chrome="off"] md-content#content .md-fab-bottom-right,
  html[data-m2-tabs="1"][data-m2-chrome="off"] md-content#content md-fab-speed-dial,
  html[data-m2-tabs="1"][data-m2-chrome="off"] md-content#content .md-fab-speed-dial {
    bottom: calc(16px + var(--m2-safe-b, 0px)) !important;
  }

  .m2h { padding: 14px 14px 110px; }
  .m2h-top { display: block; margin-bottom: 0; }
  .m2h-hello, .m2h-compose, .m2h-ask { display: none; }
  .m2h-search { width: 100%; max-width: none; margin: 0 0 14px; }
  .m2h-grid { display: block; }
  .m2h-side, .m2h-chat, .m2h-files, .m2h-safe, .m2h-help { display: none; }
  .m2h-mail { margin-bottom: 12px; overflow: visible; }
  .m2h-mail .m2h-head { padding: 12px 14px 4px; }
  .m2h-mail .m2h-head .m2h-ico, .m2h-mail .m2h-link { display: none; }
  .m2h-list { padding: 0; }
  .m2h-list li:nth-child(n+5) { display: none; }
  .m2h-list li + li .m2h-row { border-top: 1px solid var(--m2-border); }
  .m2h-row { border-radius: 0; padding: 12px 14px; }
  .m2h-snip { display: none; }
  .m2h-more { display: block; width: 100%; margin: 0; border: 0; border-top: 1px solid var(--m2-border); border-radius: 0; background: none !important; padding: 13px; }
  .m2h-phone { display: block; }
  .m2h-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
  .m2h-tiles button {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-width: 0;
    min-height: 76px; padding: 12px; border: 1px solid var(--m2-border); border-radius: 14px;
    background: var(--m2-card) !important; font-size: 14px; font-weight: 600; text-align: start;
  }
  .m2h-tiles svg { box-sizing: content-box; width: 19px; height: 19px; padding: 6px; border-radius: 10px; background: var(--m2-light); color: var(--m2-dark); }
  .m2h-tiles span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .m2h-safeline {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 14px; border: 0; border-radius: 14px;
    background: rgba(16, 185, 129, .08) !important; color: #047857 !important; font-size: 13px; font-weight: 600; text-align: start;
  }
  body:not(.light-mode) .m2h-safeline { color: #6ee7b7 !important; }
  .m2h-safeline small { margin-inline-start: auto; color: var(--m2-muted); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
html[data-m2-app="1"] .m2-tabbar { display: grid; }

/* Collapsed account actions, one icon row under the profile. */
.m2-prow {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 6px;
  height: auto !important;
  padding: 8px 12px 12px;
}
.m2-prow-btn {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: #7fb9d3;
}
.m2-prow-btn .material-icons { font-size: 22px; }
.m2-prow-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 8px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff !important;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
}

/* Phone home header: logo, search, alerts, account. Other pages keep their own bar. */
.m2-mhead {
  display: none;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 12px;
  background: var(--m2-card);
  border-bottom: 1px solid var(--m2-border);
}
html[data-m2-mhead="1"] .m2-mhead {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 6;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
html[data-m2-app="1"][data-m2-mhead="1"] .m2-mhead,
html[data-m2-tabs="1"][data-m2-mhead="1"] .m2-mhead {
  box-sizing: border-box;
  height: calc(60px + var(--m2-safe-t, 0px));
  padding: var(--m2-safe-t, 0px) 12px 0;
}
/* The page is a horizontal flex row. A header sibling was squeezing the dashboard into a strip. */
html[data-m2-mhead="1"] md-content#content {
  flex-direction: column !important;
  align-items: stretch !important;
}
html[data-m2-mhead="1"] md-content#content > .flex {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html[data-m2-mhead="1"] md-content#content header.user-styled-header:not(.notch-toolbar) {
  display: none !important;
}
.m2-mhead-menu {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--m2-text);
}
.m2-mhead-menu .material-icons { font-size: 26px; line-height: 26px; }
.m2-mhead-brand { display: flex; align-items: center; min-width: 0; }
.m2-mhead-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 136px;
  object-fit: contain;
  object-position: left center;
}
body:not(.light-mode) .m2-mhead-logo { filter: brightness(0) invert(1); }
.m2-mhead-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.m2-mhead-actions button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--m2-border);
  border-radius: 50%;
  background: var(--m2-card);
  color: var(--m2-text);
}
.m2-mhead-actions .material-icons { font-size: 22px; }
.m2-mhead-actions .m2-mhead-av {
  border: 0 !important;
  color: #fff !important;
  font-family: var(--m2-font-display) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(5, 20, 31, .3);
  --m2-av: linear-gradient(135deg, #55C8E8 0%, #0891b2 100%);
  background:
    radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 50%),
    radial-gradient(90% 70% at 85% 100%, rgba(5, 20, 31, .16) 0%, rgba(5, 20, 31, 0) 60%),
    var(--m2-av) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 2px 8px rgba(8, 145, 178, .22);
}
.m2-mhead-actions .m2-mhead-av[data-m2-tone="1"] { --m2-av: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%); }
.m2-mhead-actions .m2-mhead-av[data-m2-tone="2"] { --m2-av: linear-gradient(135deg, #67e8f9 0%, #0891b2 55%, #075985 100%); }
.m2-mhead-actions .m2-mhead-av[data-m2-tone="3"] { --m2-av: linear-gradient(135deg, #5eead4 0%, #0d9488 100%); }
.m2-mhead-actions .m2-mhead-av[data-m2-tone="4"] { --m2-av: linear-gradient(135deg, #7dd3fc 0%, #2563eb 100%); }
.m2-navsheet .m2-sheet-item > span:not(.material-icons) {
  flex: 1 1 auto;
  min-width: 0;
  color: #0b2232;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}
.m2-update {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  background: #05141f;
  color: #fff;
  font-family: var(--m2-font);
}
.m2-update-card { width: 100%; max-width: 340px; text-align: center; }
.m2-update-card img { height: 42px; width: auto; margin: 0 auto 28px; filter: brightness(0) invert(1); }
.m2-update-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.m2-update-card p { margin: 0 0 22px; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.45; }
.m2-update-go {
  min-width: 180px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #55C8E8, #0891B2);
  color: #05141f;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
.m2-update-go:disabled { opacity: .65; }
.m2-update-skip {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}
.m2-update-err { color: #fecaca !important; }
.m2-mhead-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
}
.m2-navsheet { display: block; }
.m2-navsheet .m2-sheet-item .material-icons { font-family: "Material Icons" !important; }

/* Outlook-style mail: search field, hover actions, reply docked under the thread. */
.mail-list-area-near-viewer md-toolbar .md-toolbar-tools { position: relative; }
.m2-qsearch {
  flex: 1 1 180px;
  min-width: 120px;
  max-width: 420px;
  box-sizing: border-box;
  height: 36px;
  margin: 0 8px;
  padding: 0 14px;
  border: 1px solid var(--m2-border);
  border-radius: 999px;
  background: #f4f8fb;
  color: var(--m2-text);
  font: 14px/34px var(--m2-font);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.m2-qsearch:focus { border-color: #0891b2; background: #fff; }
body:not(.light-mode) .m2-qsearch { background: rgba(255, 255, 255, .06); color: #e7f3fa; }
.mail-list-area-near-viewer md-list-item { position: relative; }
.m2-row-pick {
  display: none;
  position: absolute;
  z-index: 30;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid #7b8b99;
  border-radius: 5px;
  background: #fff;
  color: transparent;
  cursor: pointer;
  place-items: center;
}
body:not(.light-mode) .m2-row-pick { background: #0c1f30; border-color: #8fa3b5; }
.m2-row-pick .material-icons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; color: inherit; }
.m2-row-acts {
  display: none;
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  z-index: 4;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 10px;
  background: #d4f1f9;
  transform: translateY(-50%);
  box-shadow: none;
}
body:not(.light-mode) .m2-row-acts { background: #193d51; }
@media (min-width: 761px) {
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-hot {
    background-color: #d4f1f9 !important;
    box-shadow: inset 3px 0 0 #0891b2 !important;
  }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) body:not(.light-mode) .mail-list-area-near-viewer md-list-item.m2-hot {
    background-color: #143848 !important;
  }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-hot .m2-row-acts,
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-swiped .m2-row-acts { display: flex; opacity: 1; }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-hot .m2-row-pick,
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.selected .m2-row-pick { display: grid; }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-hot .m2-row-pick { border-color: #0891b2; }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.selected .m2-row-pick {
    background: #0891b2;
    border-color: #0891b2;
    color: #fff;
  }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-hot flippy-front,
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.selected flippy-front,
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item flippy-back {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html[class*="active-theme-"]:not([data-m2-app="1"]):not([data-m2-tabs="1"]) .mail-list-area-near-viewer md-list-item.m2-hot .mail-action-area { visibility: hidden; }
}
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread:not(.mail-focused):not(.m2-hot):not([data-m2-dir]) {
  background: rgba(225, 29, 72, .07) !important;
}
html[class*="active-theme-"] body:not(.light-mode) .mail-list-area-near-viewer md-list-item.m2-unread:not(.mail-focused):not(.m2-hot):not([data-m2-dir]) {
  background: rgba(225, 29, 72, .16) !important;
}
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread h4.subject-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread h4.subject-line > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread h4.subject-line,
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread h4.subject-line span,
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread h4.lighter > .inline:first-child,
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-unread h4.lighter > .inline:first-child span {
  font-weight: 800 !important;
  color: var(--m2-text) !important;
}
html[class*="active-theme-"] .mail-list-area-near-viewer .m2-mail-new {
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff !important;
  font-size: 11px;
  font-weight: 800 !important;
  line-height: 18px;
  letter-spacing: .02em;
}
.m2-row-acts button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4b5b6b;
  cursor: pointer;
}
body:not(.light-mode) .m2-row-acts button { color: #d5e6f0; }
.m2-row-acts button:hover { background: rgba(8, 145, 178, .14); color: #0891b2; }
.m2-row-acts button[data-m2-row="trash"]:hover { background: rgba(220, 38, 38, .12); color: #dc2626; }
.m2-row-acts .material-icons { font-size: 18px; }
@media (max-width: 760px) {
  .m2-qsearch {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    width: calc(100% - 16px);
    max-width: none;
    margin: 6px 8px 8px;
  }
  .mail-list-area-near-viewer .mailbox { padding-top: 0; }
}

/* Phone mail: solid bars, room for the last row, hide chrome while scrolling down. */
html[data-m2-tabs="1"] header.user-styled-header:not(.notch-toolbar),
html[data-m2-tabs="1"] md-content#content md-toolbar:not(.md-accent):not(.md-warn),
html[data-m2-app="1"] header.user-styled-header:not(.notch-toolbar),
html[data-m2-app="1"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--m2-card) !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer .overflow-y,
html[data-m2-app="1"] .mail-list-area-near-viewer .overflow-y {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer .ReactVirtualized__Grid__innerScrollContainer,
html[data-m2-app="1"] .mail-list-area-near-viewer .ReactVirtualized__Grid__innerScrollContainer {
  margin-top: var(--m2-mailbar, 64px) !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer .md-virtual-repeat-scroller,
html[data-m2-app="1"] .mail-list-area-near-viewer .md-virtual-repeat-scroller,
html[data-m2-tabs="1"] .mail-list-area-near-viewer .ReactVirtualized__Grid__innerScrollContainer,
html[data-m2-app="1"] .mail-list-area-near-viewer .ReactVirtualized__Grid__innerScrollContainer {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(96px + var(--m2-safe-b, 0px)) !important;
  box-sizing: border-box;
}
html[data-m2-tabs="1"] .file-list react-component:has(.react-multi-carousel-list),
html[data-m2-app="1"] .file-list react-component:has(.react-multi-carousel-list) {
  display: none !important;
}
html[data-m2-tabs="1"] .ReactVirtualized__Table__headerRow,
html[data-m2-app="1"] .ReactVirtualized__Table__headerRow {
  display: none !important;
}
html[data-m2-tabs="1"] .ReactVirtualized__Table > .ReactVirtualized__Grid,
html[data-m2-app="1"] .ReactVirtualized__Table > .ReactVirtualized__Grid {
  top: 0 !important;
  height: 100% !important;
}
html[data-m2-tabs="1"] .m2-setbar,
html[data-m2-app="1"] .m2-setbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 12px;
  background: var(--m2-card);
  border-bottom: 1px solid var(--m2-border);
  position: sticky;
  top: 0;
  z-index: 5;
}
html[data-m2-tabs="1"] .m2-setchip,
html[data-m2-app="1"] .m2-setchip {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--m2-border);
  border-radius: 999px;
  background: var(--m2-bg);
  color: var(--m2-text);
  font: 600 13px/1 var(--m2-font);
}
html[data-m2-tabs="1"] .m2-setchip.on,
html[data-m2-app="1"] .m2-setchip.on {
  border-color: transparent;
  background: var(--m2-grad);
  color: var(--m2-ink);
}
html[data-m2-tabs="1"] .m2-hub-tabs button,
html[data-m2-app="1"] .m2-hub-tabs button {
  min-height: 44px;
}
html[data-m2-tabs="1"] md-content#content .m2-hub-tabs,
html[data-m2-app="1"] md-content#content .m2-hub-tabs {
  display: flex;
  width: calc(100% - 24px);
  margin: 10px 12px 8px;
}
html[data-m2-tabs="1"] md-content#content .m2-hub-tabs button,
html[data-m2-app="1"] md-content#content .m2-hub-tabs button {
  flex: 1 1 0;
  min-width: 0;
}
html[data-m2-tabs="1"] .m2-meet-panel .m2-vox-head,
html[data-m2-app="1"] .m2-meet-panel .m2-vox-head {
  gap: 8px;
  padding: 12px;
}
html[data-m2-tabs="1"] .m2-meet-panel .m2-vox-mark,
html[data-m2-app="1"] .m2-meet-panel .m2-vox-mark {
  width: 36px;
  height: 36px;
}
html[data-m2-tabs="1"] .m2-meet-panel .m2-vox-h h2,
html[data-m2-app="1"] .m2-meet-panel .m2-vox-h h2 {
  font-size: 15px;
  line-height: 1.25;
}
html[data-m2-tabs="1"] .m2-empty-cta button,
html[data-m2-app="1"] .m2-empty-cta button {
  height: 44px;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item,
html[data-m2-app="1"] .mail-list-area-near-viewer md-list-item {
  touch-action: pan-y;
}
html[data-m2-tabs="1"] md-toast,
html[data-m2-app="1"] md-toast {
  bottom: calc(92px + var(--m2-safe-b, 0px)) !important;
}
html[data-m2-tabs="1"] .m2-tabbar,
html[data-m2-tabs="1"] .md-fab.md-fab-bottom-right,
html[data-m2-tabs="1"] md-fab-speed-dial.md-fab-bottom-right,
html[data-m2-tabs="1"] button.md-fab.bkg-activities,
html[data-m2-tabs="1"] .m2-home-fab {
  transition: transform .18s ease, bottom .18s ease, top .18s ease;
}
html[data-m2-tabs="1"][class*="active-theme-"] md-content#content,
html[data-m2-app="1"][class*="active-theme-"] md-content#content {
  height: calc(100dvh - 74px) !important;
  max-height: calc(100dvh - 74px) !important;
  padding-bottom: 0 !important;
}
html[data-m2-nav="sys"][data-m2-tabs="1"][class*="active-theme-"] md-content#content,
html[data-m2-nav="sys"][data-m2-app="1"][class*="active-theme-"] md-content#content {
  height: calc(100dvh - 64px) !important;
  max-height: calc(100dvh - 64px) !important;
}
html[data-m2-tabs="1"][data-m2-chrome="off"] md-content#content,
html[data-m2-app="1"][data-m2-chrome="off"] md-content#content {
  height: auto !important;
  max-height: none !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer,
html[data-m2-app="1"] .mail-list-area-near-viewer,
html[data-m2-tabs="1"] .mail-list-area-near-viewer .mailbox,
html[data-m2-app="1"] .mail-list-area-near-viewer .mailbox,
html[data-m2-tabs="1"] .mail-list-area-near-viewer .overflow-y,
html[data-m2-app="1"] .mail-list-area-near-viewer .overflow-y {
  background: var(--m2-card);
}
html[data-m2-tabs="1"][data-m2-chrome="off"] .m2-tabbar,
html[data-m2-app="1"][data-m2-chrome="off"] .m2-tabbar {
  transform: translate3d(0, 110%, 0);
  pointer-events: none;
}
/* The mail toolbar stays out of the list height, so hiding it cannot open a gap. */
html[data-m2-tabs="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view),
html[data-m2-app="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools,
html[data-m2-app="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box !important;
  align-items: center;
  overflow: visible !important;
  padding-top: calc(var(--m2-safe-t, max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px))) + 10px) !important;
  padding-bottom: 10px !important;
  height: auto !important;
  max-height: none !important;
  background: var(--m2-card) !important;
  border-bottom: 1px solid var(--m2-border);
  transform: translate3d(0, 0, 0);
  transition: transform .18s ease, opacity .15s ease;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer .m2-qsearch,
html[data-m2-app="1"] .mail-list-area-near-viewer .m2-qsearch {
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
  overflow: visible !important;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 36px;
  min-height: 36px;
  margin: 0 8px 0 0 !important;
  align-self: center;
}
html[data-m2-tabs="1"][data-m2-chrome="off"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools,
html[data-m2-app="1"][data-m2-chrome="off"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools {
  transform: translate3d(0, -110%, 0);
  opacity: 0;
  pointer-events: none;
}
html[data-m2-tabs="1"][data-m2-chrome="off"] .md-fab.md-fab-bottom-right,
html[data-m2-tabs="1"][data-m2-chrome="off"] md-fab-speed-dial.md-fab-bottom-right,
html[data-m2-tabs="1"][data-m2-chrome="off"] button.md-fab.md-fab-bottom-right,
html[data-m2-tabs="1"][data-m2-chrome="off"] button.md-fab.bkg-activities,
html[data-m2-tabs="1"][data-m2-chrome="off"] .m2-home-fab,
html[data-m2-app="1"][data-m2-chrome="off"] .md-fab.md-fab-bottom-right,
html[data-m2-app="1"][data-m2-chrome="off"] md-fab-speed-dial.md-fab-bottom-right,
html[data-m2-app="1"][data-m2-chrome="off"] button.md-fab.md-fab-bottom-right,
html[data-m2-app="1"][data-m2-chrome="off"] button.md-fab.bkg-activities {
  bottom: calc(16px + var(--m2-safe-b, 0px)) !important;
}

html[data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item,
html[data-m2-app="1"] .mail-list-area-near-viewer md-list-item,
html[data-m2-touch="1"] .mail-list-area-near-viewer md-list-item {
  background-clip: padding-box;
}
html[class*="active-theme-"][data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir],
html[class*="active-theme-"][data-m2-app="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir],
html[class*="active-theme-"][data-m2-touch="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir] {
  overflow: hidden;
  box-shadow: none !important;
}
html[class*="active-theme-"][data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir="left"],
html[class*="active-theme-"][data-m2-app="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir="left"],
html[class*="active-theme-"][data-m2-touch="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir="left"] {
  background-color: #188038 !important;
}
html[class*="active-theme-"][data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir="right"],
html[class*="active-theme-"][data-m2-app="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir="right"],
html[class*="active-theme-"][data-m2-touch="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir="right"] {
  background-color: #1a73e8 !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir] > :not(.m2-swipe-label),
html[data-m2-app="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir] > :not(.m2-swipe-label),
html[data-m2-touch="1"] .mail-list-area-near-viewer md-list-item[data-m2-dir] > :not(.m2-swipe-label) {
  background-color: var(--m2-card) !important;
  position: relative;
  z-index: 2;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item.m2-swipe-back > :not(.m2-swipe-label),
html[data-m2-app="1"] .mail-list-area-near-viewer md-list-item.m2-swipe-back > :not(.m2-swipe-label),
html[data-m2-touch="1"] .mail-list-area-near-viewer md-list-item.m2-swipe-back > :not(.m2-swipe-label) {
  transition: transform .28s cubic-bezier(.2, .85, .2, 1);
}
html[class*="active-theme-"][data-m2-touch="1"] md-content#content .mail-list-area-near-viewer md-list-item[data-m2-dir="left"] {
  background-color: #188038 !important;
}
html[class*="active-theme-"][data-m2-touch="1"] md-content#content .mail-list-area-near-viewer md-list-item[data-m2-dir="right"] {
  background-color: #1a73e8 !important;
}
.m2-auth-row { display: none !important; }
.m2-swipe-label {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  color: #fff;
  font: 700 13px/1 var(--m2-font);
  pointer-events: none;
}
.m2-swipe-label .material-icons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  transition: transform .16s cubic-bezier(.3, 1.6, .5, 1);
}
.m2-swipe-label > span:last-child {
  opacity: .78;
  transition: opacity .12s ease;
}
md-list-item.m2-armed .m2-swipe-label .material-icons { transform: scale(1.28); }
md-list-item.m2-armed .m2-swipe-label > span:last-child { opacity: 1; }
html[data-m2-tabs="1"] .mail-list-area-near-viewer md-list-item,
html[data-m2-app="1"] .mail-list-area-near-viewer md-list-item,
html[data-m2-touch="1"] .mail-list-area-near-viewer md-list-item {
  touch-action: pan-y;
}
md-list-item.m2-swiping > :not(.m2-swipe-label) {
  will-change: transform;
}
html[class*="active-theme-"] body md-content#content md-list-item.m2-calm:not([data-m2-dir]) {
  background: transparent !important;
  box-shadow: none !important;
}
md-list-item.m2-flip-read *:not(.text):not(.material-icons) { font-weight: 400 !important; }
md-list-item.m2-flip-unread h4.subject-line,
md-list-item.m2-flip-unread h4.subject-line * { font-weight: 700 !important; }
md-list-item.m2-flip-unread h4 .inline > span { font-weight: 500 !important; }
md-list-item[data-m2-dir="left"] .m2-swipe-label { right: 0; }
md-list-item[data-m2-dir="right"] .m2-swipe-label { left: 0; }
html[dir="rtl"] md-list-item[data-m2-dir="left"] .m2-swipe-label { right: auto; left: 0; }
html[dir="rtl"] md-list-item[data-m2-dir="right"] .m2-swipe-label { left: auto; right: 0; }

mark.m2-hit {
  background: #ffe082;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
body:not(.light-mode) mark.m2-hit { background: #8a6a12; color: #fff; }

.m2-auth-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 6px;
  vertical-align: middle;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}
.m2-auth-inline .m2-auth-btn {
  position: relative;
  z-index: 6;
  width: 32px;
  height: 32px;
  box-shadow: none;
  background: transparent;
  pointer-events: auto;
}
.m2-auth-row {
  position: absolute;
  z-index: 3;
  top: 8px;
  inset-inline-end: 8px;
  display: flex;
  gap: 4px;
}
.m2-auth-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--m2-card);
  box-shadow: 0 1px 3px rgba(5, 20, 31, .16);
}
.m2-auth-btn .material-icons { font-size: 16px; }
.m2-auth-btn.m2-auth-ok { color: #188038; }
.m2-auth-btn.m2-auth-bad { color: #d93025; }
.m2-auth-btn.m2-auth-unk { color: #e37400; }
.mail-force-absolute-over {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  margin-inline-end: 6px;
  vertical-align: middle;
  z-index: 2;
  pointer-events: none;
}
.mail-force-absolute-over md-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 18px !important;
  line-height: 20px !important;
}
md-icon.spam-check-ok, md-icon.lock-ok { color: #188038 !important; }
md-icon.spam-check-warn { color: #d93025 !important; }
md-icon.spam-check-error { color: #e37400 !important; }
.mail-force-absolute-over md-icon.mail-state-error { color: #d93025 !important; }
html[data-m2-tabs="1"] #mail-viewer-side md-icon.spam-check-ok,
html[data-m2-tabs="1"] #mail-viewer-side md-icon.spam-check-warn,
html[data-m2-tabs="1"] #mail-viewer-side md-icon.spam-check-error,
html[data-m2-tabs="1"] #mail-viewer-side md-icon.lock-ok,
html[data-m2-app="1"] #mail-viewer-side md-icon.spam-check-ok,
html[data-m2-app="1"] #mail-viewer-side md-icon.spam-check-warn,
html[data-m2-app="1"] #mail-viewer-side md-icon.spam-check-error,
html[data-m2-app="1"] #mail-viewer-side md-icon.lock-ok {
  width: 28px !important;
  height: 28px !important;
  font-size: 20px !important;
}
.m2-auth-sheet {
  position: fixed;
  z-index: 2147483000;
  left: 16px;
  right: 16px;
  bottom: calc(88px + var(--m2-safe-b, 0px));
  max-width: 360px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  border-radius: 16px;
  background: #fff;
  color: #102027;
  box-shadow: 0 16px 40px rgba(5, 20, 31, .28);
  font: 14px/1.45 var(--m2-font);
}
.m2-auth-sheet b { display: block; margin-bottom: 8px; font-size: 15px; }
.m2-auth-sheet p { margin: 0 0 4px; }
.m2-auth-sheet ul { margin: 8px 0 0; padding: 0; list-style: none; }
.m2-auth-sheet li { padding: 3px 0; }
.m2-auth-sheet .m2-auth-ok { color: #188038; }
.m2-auth-sheet .m2-auth-bad { color: #d93025; }
.m2-auth-sheet .m2-auth-unk { color: #e37400; }
.m2-auth-x {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--m2-muted);
  font-size: 20px;
}
.m2-auth-tip {
  position: fixed;
  z-index: 2147483000;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #102027;
  color: #fff;
  box-shadow: 0 8px 24px rgba(5, 20, 31, .28);
  font: 600 13px/1.4 var(--m2-font);
  pointer-events: none;
}
html[data-m2-tabs="1"] md-fab-speed-dial.md-is-open > md-fab-trigger md-icon,
html[data-m2-app="1"] md-fab-speed-dial.md-is-open > md-fab-trigger md-icon {
  transform: rotate(45deg);
  transition: transform .16s ease;
}

/* ---------- In-app room. The customer stays inside M2 BOX. ---------- */
.m2-inside { position: fixed; inset: 0; z-index: 12000; display: flex; flex-direction: column; background: var(--m2-card); color: var(--m2-ink); font-family: var(--m2-font); }
.m2-inside-bar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 52px; padding: calc(8px + max(env(safe-area-inset-top, 0px), var(--m2-inset-top, 0px))) 14px 8px; border-bottom: 1px solid var(--m2-border); background: var(--m2-card); }
.m2-inside-back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px; border: 1px solid var(--m2-border); border-radius: 999px; background: var(--m2-card); color: var(--m2-ink); font: 600 14px/1 var(--m2-font); cursor: pointer; }
.m2-inside-back .material-icons { font-size: 20px; }
.m2-inside[dir="rtl"] .m2-inside-back .material-icons { transform: scaleX(-1); }
.m2-inside-bar strong { min-width: 0; font: 600 16px/1.2 var(--m2-font-display); color: var(--m2-ink); }
.m2-inside iframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--m2-card); }

/* ---------- VOX: new meeting sheet ---------- */
.m2h-vox { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.m2h-vox:hover { color: var(--m2-dark); }
.m2-vox { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 20, 31, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--m2-font); }
.m2-vox.on { display: flex; }
.m2-vox-card { width: min(520px, 100%); max-height: min(720px, 92vh); overflow: auto; background: var(--m2-card); color: var(--m2-text); border: 1px solid var(--m2-border); border-radius: 20px; box-shadow: 0 30px 80px rgba(5, 20, 31, .35), 0 0 0 1px rgba(85, 200, 232, .12); }
.m2-vox-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; color: #eaf4fa; background: radial-gradient(320px 180px at 12% -30%, rgba(85, 200, 232, .38), transparent 70%), radial-gradient(260px 200px at 110% 120%, rgba(8, 145, 178, .30), transparent 70%), linear-gradient(160deg, #071c2c 0%, #0a2744 100%); }
.m2-vox-mark { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(85, 200, 232, .34); box-shadow: 0 8px 24px rgba(85, 200, 232, .22); color: #55c8e8; display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 var(--m2-font-brand, var(--m2-font)); letter-spacing: 2px; }
.m2-vox-h { flex: 1; min-width: 0; }
.m2-vox-h h2 { margin: 0; font: 700 18px/1.3 var(--m2-font-display, var(--m2-font)); color: #fff; }
.m2-vox-h small { color: #55c8e8; font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.m2-vox-head .m2-vox-icon { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(143, 179, 201, .25); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #d6e6ef; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.m2-vox-head .m2-vox-icon:hover { background: rgba(85, 200, 232, .16); color: #fff; }
.m2-vox-icon { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--m2-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.m2-vox-icon:hover { background: var(--m2-hover); color: var(--m2-text); }
.m2-vox-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.m2-vox-opts { display: flex; flex-direction: column; gap: 10px; }
.m2-vox-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--m2-border); border-radius: 14px; background: var(--m2-card); color: var(--m2-text); text-align: start; cursor: pointer; font: inherit; transition: border-color .15s, background .15s, transform .1s; }
.m2-vox-opt:hover { border-color: var(--m2-primary); background: var(--m2-hover); }
.m2-vox-opt:active { transform: scale(.99); }
.m2-vox-opt[disabled] { opacity: .55; cursor: progress; }
.m2-vox-opt b { display: block; font-size: 15px; }
.m2-vox-opt small { display: block; margin-top: 2px; color: var(--m2-muted); font-size: 12.5px; }
.m2-vox-oico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--m2-grad); color: #05141f; display: inline-flex; align-items: center; justify-content: center; }
.m2-vox-sec { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--m2-muted); text-transform: uppercase; }
.m2-vox-muted { margin: 0; color: var(--m2-muted); font-size: 13.5px; line-height: 1.6; }
.m2-vox-err { margin: 0; color: #dc2626; font-size: 13px; }
.m2-vox-ok { margin: 0; color: var(--m2-dark); font-size: 13px; font-weight: 600; }
.m2-vox-list { list-style: none; margin: 0; padding: 0; }
.m2-vox-list li { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--m2-border); }
.m2-vox-list li:first-child { border-top: 0; }
.m2-vox-row { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: var(--m2-text); text-align: start; cursor: pointer; font: inherit; }
.m2-vox-row b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m2-vox-row small { color: var(--m2-muted); font-size: 12px; }
.m2-vox-linkbox { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--m2-bg); border: 1px solid var(--m2-border); }
.m2-vox[dir="rtl"] .m2-vox-linkbox { padding: 8px 14px 8px 8px; }
.m2-vox-linkbox span { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; color: var(--m2-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-vox-when { display: flex; align-items: center; gap: 8px; color: var(--m2-dark); font-weight: 600; font-size: 14px; }
.m2-vox-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m2-vox-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--m2-border); background: var(--m2-card); color: var(--m2-text); font: 600 14px/1 var(--m2-font); cursor: pointer; white-space: nowrap; }
.m2-vox-btn:hover { background: var(--m2-hover); }
.m2-vox-btn[disabled] { opacity: .55; cursor: progress; }
.m2-vox-primary { border-color: transparent; background: var(--m2-grad); color: #05141f; }
.m2-vox-primary:hover { background: var(--m2-grad); filter: brightness(1.05); }
.m2-vox-go { margin-inline-start: auto; border-color: var(--m2-primary); color: var(--m2-dark); }
.m2-vox-wide { width: 100%; padding: 13px; }
.m2-vox-more { border-top: 1px solid var(--m2-border); padding-top: 10px; }
.m2-vox-more summary { cursor: pointer; color: var(--m2-dark); font-weight: 600; font-size: 14px; padding: 4px 0; }
.m2-vox-more[open] { display: flex; flex-direction: column; gap: 10px; }
.m2-vox-more > .m2-vox-check,
.m2-vox-more > .m2-vox-btn { margin-top: 12px; }
.m2-vox-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.m2-vox-field span { font-size: 12px; font-weight: 600; color: var(--m2-muted); }
.m2-vox-field input, .m2-vox-field select, .m2-vox-field textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--m2-border); background: var(--m2-bg); color: var(--m2-text); font: 14px/1.4 var(--m2-font); outline: none; resize: vertical; }
.m2-vox-field input:focus, .m2-vox-field select:focus, .m2-vox-field textarea:focus { border-color: var(--m2-primary); }
.m2-vox-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m2-vox-field .m2-vox-passrow { display: flex; gap: 8px; align-items: stretch; font-size: inherit; font-weight: inherit; color: inherit; }
.m2-vox-passrow input { flex: 1; min-width: 0; letter-spacing: .5px; }
.m2-vox-passrow .m2-vox-btn { flex: none; white-space: nowrap; }
.m2-vox-when b { margin-inline-start: 4px; letter-spacing: 1px; color: var(--m2-text); }
.m2-vox-open { margin: 0; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--m2-primary) 14%, var(--m2-card)); color: var(--m2-text); font: 600 13.5px/1.45 var(--m2-font); }
.m2-vox-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--m2-text); cursor: pointer; }
.m2-vox-check input { width: 18px; height: 18px; accent-color: #0891b2; }
.m2-vox-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--m2-border); border-top-color: var(--m2-primary); animation: m2-vox-spin .9s linear infinite; }
@keyframes m2-vox-spin { to { transform: rotate(360deg); } }
.m2-vox-toast { position: fixed; left: 50%; bottom: calc(28px + max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px))); z-index: 10060; transform: translate(-50%, 20px); opacity: 0; padding: 11px 18px; border-radius: 12px; background: #05141f; color: #fff; font: 600 14px/1.3 var(--m2-font); box-shadow: 0 10px 30px rgba(5, 20, 31, .35); transition: opacity .18s, transform .18s; pointer-events: none; }
.m2-vox-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .m2-vox { align-items: flex-end; padding: 0; }
  .m2-vox-card { width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px)); }
  .m2-vox-two { grid-template-columns: 1fr 1fr; }
  html[data-m2-tabs="1"] .m2-vox-toast, html[data-m2-app="1"] .m2-vox-toast { bottom: calc(86px + max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px))); }
}

/* ---------- chat: conversation index (drawer + page) ---------- */
html[class*="active-theme-"] .chat-tabs .ReactVirtualized__Grid md-list-item .md-list-item-text {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  width: 100%;
}
html[class*="active-theme-"] .chat-tabs .ReactVirtualized__Grid md-list-item h4 {
  margin: 0;
  line-height: 1.35;
}
html[class*="active-theme-"] .chat-tabs .ReactVirtualized__Grid md-list-item h4.highlightable {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[class*="active-theme-"] .chat-tabs .ReactVirtualized__Grid md-list-item h4.lighter:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  font-size: 11.5px !important;
  font-weight: 600;
  white-space: nowrap;
}
html[class*="active-theme-"] .chat-tabs .ReactVirtualized__Grid md-list-item h4.lighter:nth-of-type(3) {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  font-size: 12.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[class*="active-theme-"] .chat-tabs .m2-auth-inline .m2-auth-btn {
  width: 22px;
  height: 22px;
}
html[class*="active-theme-"] .react-sidenav .chat-tabs md-list-item h4.lighter {
  color: rgba(207, 227, 239, .82) !important;
}
html[class*="active-theme-"] .react-sidenav .chat-tabs .m2-auth-inline .m2-auth-btn {
  background: transparent;
  box-shadow: none;
}
html[class*="active-theme-"] md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item {
  box-shadow: inset 0 -1px 0 var(--m2-border);
}
html[class*="active-theme-"] md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item:hover {
  background: var(--m2-hover) !important;
}
html[class*="active-theme-"] md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item h4.highlightable {
  color: var(--m2-text) !important;
  font-family: var(--m2-font-display);
  font-weight: 700;
}
html[class*="active-theme-"] md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item h4.lighter {
  color: var(--m2-muted) !important;
}
html[class*="active-theme-"] md-content#content react-component[name="RComponents.ChatSidenavMenu"] .MuiTabs-root {
  width: min(420px, calc(100% - 32px));
  margin: 12px 16px 6px;
  min-height: 40px;
  padding: 4px;
  border-radius: 12px;
  background: var(--m2-hover);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] md-content#content react-component[name="RComponents.ChatSidenavMenu"] .MuiTab-root {
  min-width: 0;
  min-height: 32px;
  border-radius: 9px;
  font-family: var(--m2-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--m2-muted);
  text-transform: none;
}
html[class*="active-theme-"] md-content#content react-component[name="RComponents.ChatSidenavMenu"] .MuiTab-root.Mui-selected {
  color: var(--m2-text);
  background: var(--m2-card);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] md-content#content react-component[name="RComponents.ChatSidenavMenu"] .MuiTabs-indicator {
  display: none;
}

/* ---------- chat hub: conversations + meetings ---------- */
html[class*="active-theme-"] [data-m2-chat-host] > .sidenav-part {
  display: none !important;
}
html[class*="active-theme-"] .m2-hub-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 12px 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--m2-hover);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-hub-tabs button {
  flex: 1;
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--m2-muted);
  font-family: var(--m2-font-display);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
html[class*="active-theme-"] .m2-hub-tabs button.on {
  color: var(--m2-text);
  background: var(--m2-card);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[data-m2-tabs="1"] .m2-hub-tabs button,
html[data-m2-app="1"] .m2-hub-tabs button {
  min-height: 44px;
}
html[class*="active-theme-"] md-content#content .m2-hub-tabs {
  display: inline-flex;
  width: auto;
  margin: 12px 16px 8px;
}
html[class*="active-theme-"] md-content#content .m2-hub-tabs button {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 0 16px;
}
html[class*="active-theme-"] .drawer-condensed .m2-hub-tabs,
html[class*="active-theme-"] .react-sidenav .m2-hub-tabs {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
html[class*="active-theme-"] .drawer-condensed .m2-hub-tabs button,
html[class*="active-theme-"] .react-sidenav .m2-hub-tabs button {
  color: rgba(207, 227, 239, .62);
}
html[class*="active-theme-"] .drawer-condensed .m2-hub-tabs button.on,
html[class*="active-theme-"] .react-sidenav .m2-hub-tabs button.on {
  color: #fff;
  background: rgba(85, 200, 232, .16);
  box-shadow: inset 0 0 0 1px rgba(85, 200, 232, .35);
}
html[class*="active-theme-"] .m2-online-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 14px 4px;
}
html[class*="active-theme-"] .m2-online-strip[hidden] { display: none; }
html[class*="active-theme-"] .m2-online-kicker {
  flex: 0 0 auto;
  font-family: var(--m2-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-online-empty {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-online-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 58px;
  flex: 0 0 58px;
  border: 0;
  background: transparent;
  color: var(--m2-text);
  cursor: pointer;
  font-family: var(--m2-font);
}
html[class*="active-theme-"] .m2-online-person .face {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--m2-grad);
  color: #fff;
  font-weight: 700;
}
html[class*="active-theme-"] .m2-online-person .face i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--m2-bg);
}
html[class*="active-theme-"] .m2-online-person small {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .drawer-condensed .m2-online-person,
html[class*="active-theme-"] .react-sidenav .m2-online-person { color: #fff; }
html[class*="active-theme-"] .drawer-condensed .m2-online-person small,
html[class*="active-theme-"] .react-sidenav .m2-online-person small,
html[class*="active-theme-"] .drawer-condensed .m2-online-kicker,
html[class*="active-theme-"] .react-sidenav .m2-online-kicker,
html[class*="active-theme-"] .drawer-condensed .m2-online-empty,
html[class*="active-theme-"] .react-sidenav .m2-online-empty { color: rgba(207, 227, 239, .82); }
html[class*="active-theme-"] [data-m2-legacy-call] { display: none !important; }
html[class*="active-theme-"] md-dialog .m2-thread-vox:not(.m2-vox-call) {
  height: 36px;
  min-height: 36px;
  padding: 0 14px 0 10px;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1 !important;
  text-transform: none !important;
}
html[class*="active-theme-"] md-dialog .m2-thread-vox:not(.m2-vox-call) .material-icons {
  color: #fff !important;
}
html[dir="rtl"] .m2-thread-vox {
  direction: rtl;
}
html[data-m2-tabs="1"] md-dialog .m2-thread-vox:not(.m2-vox-call),
html[data-m2-app="1"] md-dialog .m2-thread-vox:not(.m2-vox-call) {
  display: none !important;
}
html[class*="active-theme-"] .m2-thread-vox {
  min-height: 32px;
  margin: 0 6px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--m2-navy);
  font-family: var(--m2-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
html[data-m2-chathub="meetings"] [data-m2-chat-host] {
  position: relative;
}
html[data-m2-chathub="meetings"] [data-m2-chat-host] > .chat-tabs {
  visibility: hidden !important;
  pointer-events: none !important;
}
html[data-m2-chathub="meetings"] [data-m2-chat-host] > .m2-online-strip { display: none !important; }
html[data-m2-chathub="meetings"] [data-m2-chat-host] md-fab-speed-dial { z-index: 8; }
html[class*="active-theme-"] .m2-meet-panel { display: none; }
html[data-m2-chathub="meetings"] .m2-meet-panel {
  display: block;
  position: absolute;
  z-index: 4;
  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: var(--m2-bg);
}
html[class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .m2-vox-call.md-button:not(.md-icon-button),
html[class*="active-theme-"] .m2-vox-call,
html[class*="active-theme-"] .m2-thread-vox.m2-vox-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  margin: 0 6px;
  padding-block: 0 !important;
  padding-inline: 6px 14px !important;
  border: 0;
  border-radius: 999px !important;
  background: var(--m2-grad) !important;
  color: var(--m2-ink) !important;
  box-shadow: 0 6px 16px -6px rgba(85, 200, 232, .7) !important;
  font-family: var(--m2-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1 !important;
  text-transform: none !important;
}
html[class*="active-theme-"] .m2-vox-call:not(.m2-thread-vox) {
  padding-inline: 14px !important;
}
html[dir="rtl"] .m2-vox-call {
  direction: rtl;
}
html[class*="active-theme-"] .m2-vox-call .material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--m2-ink) !important;
  font-size: 16px;
}
html[data-m2-tabs="1"][class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .m2-vox-call.md-button,
html[data-m2-app="1"][class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .m2-vox-call.md-button,
html[data-m2-tabs="1"][class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .m2-thread-vox.md-button,
html[data-m2-app="1"][class*="active-theme-"] md-dialog md-toolbar:not(.md-warn) .md-toolbar-tools > .m2-thread-vox.md-button {
  justify-content: center;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 4px !important;
  padding: 0 !important;
}
html[data-m2-tabs="1"] .m2-vox-call .material-icons,
html[data-m2-app="1"] .m2-vox-call .material-icons {
  width: 22px;
  height: 22px;
  font-size: 15px;
}
html[class*="active-theme-"] .m2-ring {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-ink);
  border: 1px solid var(--m2-border);
  box-shadow: var(--m2-shadow);
  font-family: var(--m2-font-display);
  font-size: 14px;
  font-weight: 600;
}
html[class*="active-theme-"] .m2-ring button {
  border: 0;
  border-radius: 999px;
  background: var(--m2-grad);
  color: var(--m2-ink);
  padding: 6px 12px;
  font-family: var(--m2-font-display);
  font-weight: 700;
}
html[class*="active-theme-"] .m2-vox-instead {
  min-height: 32px;
  margin: 0 4px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--m2-navy);
  font-family: var(--m2-font-display);
  font-size: 12px;
  font-weight: 700;
}
html[data-m2-chathub="meetings"] .m2-meet-panel .m2-vox-head {
  border-radius: 0;
}
html[data-m2-chathub="meetings"] .m2-meet-panel .m2-vox-body {
  padding: 14px 16px 96px;
}
/* Page meetings follow the dashboard column: 1240 centered, cards in a row on wide screens. */
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 22px 96px;
  box-sizing: border-box;
}
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel .m2-vox-head,
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel .m2-vox-body {
  width: min(1240px, 100%);
  max-width: 1240px;
  box-sizing: border-box;
}
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel .m2-vox-head {
  border-radius: 18px;
}
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel .m2-vox-body {
  padding: 16px 2px 28px;
}
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="plan"] .m2-vox-head,
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="plan"] .m2-vox-body,
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="ready"] .m2-vox-head,
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="ready"] .m2-vox-body,
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="link"] .m2-vox-head,
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="link"] .m2-vox-body {
  width: min(640px, 100%);
}
html[data-m2-meet-page="1"] md-content#content [data-m2-chat-host] > .m2-hub-tabs {
  display: flex;
  width: fit-content;
  max-width: calc(100% - 44px);
  margin-top: 12px;
  margin-right: auto;
  margin-bottom: 8px;
  margin-left: max(22px, calc((100% - 1240px) / 2));
  box-sizing: border-box;
}
html[data-m2-meet-page="1"] md-content#content [data-m2-chat-host] > .m2-online-strip,
html[data-m2-meet-page="1"] md-content#content [data-m2-chat-host] > .chat-tabs {
  width: min(1240px, calc(100% - 44px));
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
html[data-m2-meet-page="1"] md-content#content [data-m2-chat-host] > .chat-tabs {
  overflow: hidden;
}
@media (min-width: 980px) {
  html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="menu"] .m2-vox-opts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="menu"] .m2-vox-opt {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    min-height: 128px;
    padding: 16px;
  }
  html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="menu"] .m2-vox-opt small {
    white-space: normal;
  }
  html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel .m2-vox-list {
    padding: 4px 14px;
    border: 1px solid var(--m2-border);
    border-radius: 16px;
    background: var(--m2-card);
  }
}
@media (max-width: 760px) {
  html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel {
    padding: 8px 12px 96px;
  }
  html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel .m2-vox-head {
    border-radius: 14px;
  }
  html[data-m2-meet-page="1"] md-content#content [data-m2-chat-host] > .m2-hub-tabs {
    margin-left: 12px;
  }
}
/* The page owns meetings. The narrow drawer keeps the conversation list. */
html[data-m2-meet-page="1"] .drawer-condensed [data-m2-chat-host] > .m2-meet-panel,
html[data-m2-meet-page="1"] .react-sidenav [data-m2-chat-host] > .m2-meet-panel {
  display: none !important;
}
html[data-m2-meet-page="1"][data-m2-chathub="meetings"] .drawer-condensed [data-m2-chat-host] > .chat-tabs,
html[data-m2-meet-page="1"][data-m2-chathub="meetings"] .react-sidenav [data-m2-chat-host] > .chat-tabs {
  visibility: visible !important;
  pointer-events: auto !important;
}
html[data-m2-meet-page="1"] .drawer-condensed [data-m2-chat-host] > .chat-tabs:has([name="RComponents.ChatOnlineList"]),
html[data-m2-meet-page="1"] .react-sidenav [data-m2-chat-host] > .chat-tabs:has([name="RComponents.ChatOnlineList"]) {
  display: none !important;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-head,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-head {
  gap: 8px;
  padding: 12px 10px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-mark,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-mark {
  width: 34px;
  height: 34px;
  font-size: 10px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-h h2,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-h h2 {
  font-size: 15px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-body,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-body {
  padding: 10px 10px 80px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-opt,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-opt {
  gap: 8px;
  padding: 10px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-oico,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-oico {
  width: 34px;
  height: 34px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-opt b,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-opt b {
  font-size: 13.5px;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-opt small,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-opt small,
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-row small,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-row small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-list li,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-list li,
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-row,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-row {
  min-width: 0;
}
html[data-m2-chathub="meetings"] .drawer-condensed .m2-meet-panel .m2-vox-icon,
html[data-m2-chathub="meetings"] .see-main-menu .m2-meet-panel .m2-vox-icon {
  width: 30px;
  height: 30px;
}
html[class*="active-theme-"] .drawer-condensed .m2-meet-panel .m2-vox-opt > span,
html[class*="active-theme-"] .see-main-menu .m2-meet-panel .m2-vox-opt > span {
  min-width: 0;
}
html[class*="active-theme-"] .drawer-condensed .m2-meet-panel .m2-vox-opt b,
html[class*="active-theme-"] .drawer-condensed .m2-meet-panel .m2-vox-opt small,
html[class*="active-theme-"] .see-main-menu .m2-meet-panel .m2-vox-opt b,
html[class*="active-theme-"] .see-main-menu .m2-meet-panel .m2-vox-opt small {
  white-space: normal;
}
html[class*="active-theme-"] .m2-meet-panel .m2-vox-opt,
html[class*="active-theme-"] .m2-meet-panel .m2-vox-row,
html[class*="active-theme-"] .m2-meet-panel .m2-vox-field input,
html[class*="active-theme-"] .m2-meet-panel .m2-vox-actions button {
  font-family: var(--m2-font);
}

/* ---------- VOX: untitled links fold away ---------- */
.m2-vox-quick { border-top: 1px solid var(--m2-border); padding-top: 8px; }
.m2-vox-quick summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--m2-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.m2-vox-quick summary::-webkit-details-marker { display: none; }
.m2-vox-quick summary::after { content: "expand_more"; margin-inline-start: auto; font: 20px/1 "Material Icons"; text-transform: none; transition: transform .18s ease; }
.m2-vox-quick[open] summary::after { transform: rotate(180deg); }
.m2-vox-quick summary em { min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--m2-light); color: var(--m2-dark); font-style: normal; font-size: 11.5px; line-height: 20px; text-align: center; }

/* ---------- chat page: one header, card list (desktop) ---------- */
html[class*="active-theme-"] .m2-chat-head { display: none; }
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-toolbar .md-toolbar-tools[data-m2-chat-tools] {
  min-height: 64px;
  padding-right: max(16px, calc((100% - 1240px) / 2));
  padding-left: max(16px, calc((100% - 1240px) / 2));
  gap: 12px;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) [data-m2-chat-tools] > span[translate="CHAT"] {
  flex: 0 0 auto !important;
  margin-inline-end: 8px;
  font-family: var(--m2-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--m2-text);
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) [data-m2-chat-tools]:not([data-m2-searching]) > .m2-chat-head {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) [data-m2-chat-tools]:not([data-m2-searching]) > button[ng-click="search.show()"] {
  display: none !important;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) [data-m2-chat-tools][data-m2-searching] input.autofocus-search {
  flex: 1 1 auto;
  max-width: 560px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--m2-primary);
  border-radius: 12px;
  outline: none;
  background: var(--m2-card);
  color: var(--m2-text);
  font: 500 14px/1 var(--m2-font);
  box-shadow: 0 0 0 3px rgba(85, 200, 232, .18);
}
html[class*="active-theme-"] .m2-chat-head .m2-head-title { display: none; }
/* The sidebar already switches sections, so the header names the open one instead of repeating tabs. */
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) [data-m2-chat-tools][data-m2-side-nav] > span[translate="CHAT"],
html[class*="active-theme-"] [data-m2-chat-tools][data-m2-side-nav] .m2-chat-head .m2-head-tabs {
  display: none !important;
}
html[class*="active-theme-"] [data-m2-chat-tools][data-m2-side-nav] .m2-chat-head .m2-head-title {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  font: 600 19px/1.2 var(--m2-font-display);
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-chat-head .m2-head-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--m2-hover);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-chat-head .m2-head-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--m2-muted);
  font: 600 13.5px/1 var(--m2-font-display);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-chat-head .m2-head-tabs button .material-icons { font-size: 18px; }
html[class*="active-theme-"] .m2-chat-head .m2-head-tabs button.on {
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: 0 1px 2px rgba(5, 20, 31, .08), inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-chat-head .m2-head-tabs button.on .material-icons { color: var(--m2-dark); }
html[class*="active-theme-"] .m2-chat-head .m2-head-gap { flex: 1; }
html[class*="active-theme-"] .m2-chat-head .m2-head-search,
html[class*="active-theme-"] .m2-page-head .m2-head-search {
  display: flex;
  flex: 0 1 380px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 40px;
  margin-inline-start: auto;
  padding: 0 14px;
  border: 1px solid var(--m2-border);
  border-radius: 12px;
  background: var(--m2-card);
  color: var(--m2-muted);
  font: 500 14px/1 var(--m2-font);
  text-align: start;
  cursor: text;
}
html[class*="active-theme-"] .m2-chat-head .m2-head-search:hover,
html[class*="active-theme-"] .m2-page-head .m2-head-search:hover { border-color: #b7e4f2; }
html[class*="active-theme-"] .m2-chat-head .m2-head-search .material-icons,
html[class*="active-theme-"] .m2-page-head .m2-head-search .material-icons { font-size: 20px; }
html[class*="active-theme-"] .m2-chat-head .m2-head-search span:last-child,
html[class*="active-theme-"] .m2-page-head .m2-head-search span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) {
  html[class*="active-theme-"] .m2-chat-head .m2-head-search,
  html[class*="active-theme-"] .m2-page-head .m2-head-search {
    flex: 0 0 40px;
    justify-content: center;
    padding: 0;
  }
  html[class*="active-theme-"] .m2-chat-head .m2-head-search span:last-child,
  html[class*="active-theme-"] .m2-page-head .m2-head-search span:last-child { display: none; }
}
@keyframes m2-new-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(8, 145, 178, .26), 0 0 0 0 color-mix(in srgb, var(--m2-primary) 55%, transparent);
  }
  42% {
    transform: scale(1.04);
    box-shadow: 0 5px 12px rgba(8, 145, 178, .34), 0 0 0 6px color-mix(in srgb, var(--m2-primary) 40%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(8, 145, 178, .26), 0 0 0 10px color-mix(in srgb, var(--m2-primary) 0%, transparent);
  }
}
html[class*="active-theme-"] .m2-chat-head .m2-head-new,
html[class*="active-theme-"] .m2-page-head .m2-head-new {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-grad);
  color: var(--m2-ink);
  font: 700 14px/1 var(--m2-font);
  cursor: pointer;
  animation: m2-new-pulse 1.6s ease-in-out infinite;
}
html[class*="active-theme-"] .m2-chat-head .m2-head-new:hover,
html[class*="active-theme-"] .m2-page-head .m2-head-new:hover {
  filter: none;
  animation: none;
  transform: none;
  box-shadow: 0 10px 22px rgba(8, 145, 178, .42);
}
/* Files Upload sits beside the pulsing New button, so it stays still and square. */
html[class*="active-theme-"] .m2-page-head:has([data-m2-head="create"]) > .m2-head-new[data-m2-head="new"] {
  height: 40px;
  padding: 0 14px;
  gap: 6px;
  border-radius: 12px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1.5px var(--m2-border);
  animation: none;
  transform: none;
}
html[class*="active-theme-"] .m2-page-head:has([data-m2-head="create"]) > .m2-head-new[data-m2-head="new"]:hover {
  background: var(--m2-hover);
  box-shadow: inset 0 0 0 1.5px var(--m2-primary);
  animation: none;
  transform: none;
}
html[class*="active-theme-"] md-content#content .m2-page-head:has([data-m2-head="create"]) > .m2-head-new[data-m2-head="new"] .material-icons,
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) .m2-page-head:has([data-m2-head="create"]) > .m2-head-new[data-m2-head="new"] .material-icons,
html[class*="active-theme-"] md-content#content header.user-styled-header .m2-page-head:has([data-m2-head="create"]) > .m2-head-new[data-m2-head="new"] .material-icons {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-size: 20px;
  color: var(--m2-primary) !important;
}
html[class*="active-theme-"] md-content#content md-toolbar:has(.m2-head-new),
html[class*="active-theme-"] md-content#content header.user-styled-header:has(.m2-head-new),
html[class*="active-theme-"] md-content#content md-toolbar:has(.m2-head-new) .md-toolbar-tools,
html[class*="active-theme-"] md-content#content header.user-styled-header:has(.m2-head-new) .MuiToolbar-root {
  overflow: visible !important;
}
html[class*="active-theme-"] md-content#content .m2-head-new .material-icons,
html[class*="active-theme-"] md-content#content md-toolbar:not(.md-accent):not(.md-warn) .m2-head-new .material-icons,
html[class*="active-theme-"] md-content#content header.user-styled-header .m2-head-new .material-icons,
html[class*="active-theme-"] .m2-empty-cta .m2-empty-main .material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 18px;
  color: var(--m2-ink) !important;
}
html[class*="active-theme-"] .m2h-compose svg {
  box-sizing: border-box;
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--m2-ink) !important;
}
html[class*="active-theme-"] .m2h-compose svg path {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.58);
}
html[class*="active-theme-"] .m2h-compose,
html[class*="active-theme-"] .m2-empty-cta .m2-empty-main {
  border-radius: 999px;
  color: var(--m2-ink);
  animation: m2-new-pulse 1.6s ease-in-out infinite;
}
html[class*="active-theme-"] .m2h-compose:hover,
html[class*="active-theme-"] .m2-empty-cta .m2-empty-main:hover {
  animation: none;
  transform: none;
}
html[data-m2-home="1"] .m2h-top {
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] .m2-head-new,
  html[class*="active-theme-"] .m2h-compose,
  html[class*="active-theme-"] .m2-empty-cta .m2-empty-main,
  html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-go {
    animation: none;
    box-shadow: 0 8px 18px rgba(8, 145, 178, .34);
  }
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content [data-m2-chat-host] > .m2-hub-tabs,
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content [data-m2-chat-host] md-fab-speed-dial {
  display: none !important;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content [data-m2-chat-host] > .m2-online-strip {
  margin-top: 18px;
  margin-bottom: 10px;
  padding: 0 4px;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs .ReactVirtualized__Grid > div {
  overflow: hidden !important;
  border-radius: 18px;
  background: var(--m2-card);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item {
  box-sizing: border-box;
  padding-right: 20px;
  padding-left: 20px;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item h4.highlightable {
  font-size: 15px !important;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item h4.lighter:nth-of-type(3) {
  font-size: 13.5px !important;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs md-list-item .m2-auth-inline {
  opacity: 0;
  transition: opacity .15s ease;
}
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs md-list-item:hover .m2-auth-inline,
html[data-m2-meet-page="1"]:not([data-m2-tabs="1"]) md-content#content .chat-tabs md-list-item:focus-within .m2-auth-inline {
  opacity: 1;
}
/* Meetings page: the tab already names it, so the navy sheet header goes. */
html[data-m2-chathub="meetings"] md-content#content .m2-meet-panel[data-view="menu"] .m2-vox-head {
  display: none;
}
html[data-m2-meet-page="1"][data-m2-chathub="meetings"] md-content#content .m2-meet-panel {
  padding-top: 18px;
}

/* ---------- section pages: one header, one column (desktop) ---------- */
html[class*="active-theme-"] .m2-page-head { display: none; }
html[data-m2-switching="1"] md-content#content {
  visibility: hidden !important;
}
html[data-m2-page]:not([data-m2-tabs="1"]) header.user-styled-header:has([data-m2-page-tools]) {
  position: relative;
  z-index: 8;
  overflow: visible;
}
html[data-m2-page]:not([data-m2-tabs="1"]) [data-m2-page-tools] {
  position: relative;
  z-index: 5;
  min-height: 64px;
  gap: 8px;
  padding-right: max(16px, calc((100% - 1240px) / 2)) !important;
  padding-left: max(16px, calc((100% - 1240px) / 2)) !important;
  box-sizing: border-box;
}
html[data-m2-page]:not([data-m2-tabs="1"]) [data-m2-page-tools] > h2,
html[data-m2-page]:not([data-m2-tabs="1"]) [data-m2-page-tools] > h3,
html[data-m2-page]:not([data-m2-tabs="1"]) [data-m2-page-tools] > .MuiTypography-h6 {
  margin: 0;
  font: 600 19px/1.2 var(--m2-font-display) !important;
  color: var(--m2-text);
}
html[data-m2-page]:not([data-m2-tabs="1"]) [data-m2-page-tools]:not([data-m2-searching]) > .m2-page-head {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-inline-start: 8px;
}
html[data-m2-page="files"]:not([data-m2-tabs="1"]) [data-m2-page-tools]:not([data-m2-searching]) > .m2-page-head {
  gap: 18px;
}
html[data-m2-page="files"]:not([data-m2-tabs="1"]) .see-main-menu .sidenav-part > button.MuiFab-root {
  position: fixed !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html[data-m2-page]:not([data-m2-tabs="1"]) [data-m2-page-tools][data-m2-has-find]:not([data-m2-searching]) > button[ng-click="search.show()"],
html[data-m2-page="mail"]:not([data-m2-tabs="1"]) md-content#content button.md-fab[ng-click="compose()"],
html[data-m2-page="contacts"]:not([data-m2-tabs="1"]) md-content#content button.md-fab[ng-click="create($event)"],
html[data-m2-page="notes"]:not([data-m2-tabs="1"]) md-content#content md-fab-speed-dial {
  display: none !important;
}
html[class*="active-theme-"] .m2-page-head .m2-head-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  display: none;
  min-width: 220px;
  padding: 6px;
  border-radius: 16px;
  background: var(--m2-card);
  box-shadow: 0 12px 28px rgba(5, 20, 31, .16), 0 2px 6px rgba(5, 20, 31, .06);
}
html[class*="active-theme-"] .m2-page-head.m2-menu-open .m2-head-menu { display: block; }
html[class*="active-theme-"] .m2-page-head .m2-head-menu button,
html[class*="active-theme-"] .m2-scope button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 4px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--m2-text);
  font: 500 14px/1 var(--m2-font);
  text-align: start;
  cursor: pointer;
}
html[class*="active-theme-"] .m2-page-head .m2-head-menu button:hover,
html[class*="active-theme-"] .m2-scope button:hover { background: rgba(85, 200, 232, .12); }
html[class*="active-theme-"] .m2-page-head .m2-head-menu .material-icons,
html[class*="active-theme-"] .m2-scope button .material-icons {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--m2-primary) 16%, transparent);
  font-size: 18px;
  color: var(--m2-dark) !important;
}
html[class*="active-theme-"] header.user-styled-header .m2-head-menu [data-kind="text_fields"] .material-icons,
html[class*="active-theme-"] .m2-scope [data-tone="mail"] .material-icons {
  background: color-mix(in srgb, var(--m2-tone-blue) 16%, transparent);
  color: var(--m2-tone-blue) !important;
}
html[class*="active-theme-"] header.user-styled-header .m2-head-menu [data-kind="text_format"] .material-icons,
html[class*="active-theme-"] .m2-scope [data-tone="chat"] .material-icons {
  background: color-mix(in srgb, var(--m2-tone-violet) 16%, transparent);
  color: var(--m2-tone-violet) !important;
}
html[class*="active-theme-"] header.user-styled-header .m2-head-menu [data-kind="task_alt"] .material-icons,
html[class*="active-theme-"] .m2-scope [data-tone="contacts"] .material-icons {
  background: color-mix(in srgb, var(--m2-tone-green) 16%, transparent);
  color: var(--m2-tone-green) !important;
}
html[class*="active-theme-"] header.user-styled-header .m2-head-menu [data-kind="draw"] .material-icons,
html[class*="active-theme-"] .m2-scope [data-tone="files"] .material-icons {
  background: color-mix(in srgb, var(--m2-tone-amber) 16%, transparent);
  color: var(--m2-tone-amber) !important;
}
html[data-m2-page]:not([data-m2-tabs="1"]) md-content#content .overflow-y:has(> div > .ReactVirtualized__Grid),
html[data-m2-page]:not([data-m2-tabs="1"]) md-content#content .overflow-y:has(> div > .ReactVirtualized__Table) {
  width: min(1240px, calc(100% - 44px)) !important;
  margin-right: auto;
  margin-left: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  box-sizing: border-box;
}
html[data-m2-page="files"]:not([data-m2-tabs="1"]) #recent-files-cara {
  width: min(1240px, calc(100% - 44px));
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
html[data-m2-page="files"]:not([data-m2-tabs="1"]) #recent-files-cara .react-multi-carousel-list {
  width: 100% !important;
}
html[data-m2-page="files"]:not([data-m2-tabs="1"]) #recent-files-cara .react-multi-carousel-item {
  width: 393px !important;
  flex: 0 0 393px !important;
}
html[data-m2-page]:not([data-m2-tabs="1"]) md-content#content .overflow-y > div > .ReactVirtualized__Grid > .ReactVirtualized__Grid__innerScrollContainer,
html[data-m2-page]:not([data-m2-tabs="1"]) md-content#content .overflow-y > div > .ReactVirtualized__Table .ReactVirtualized__Grid__innerScrollContainer {
  border-radius: 18px;
  background: var(--m2-card);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}

/* ---------- contacts: reach a person from the row ---------- */
html[class*="active-theme-"] .ReactVirtualized__Table__row > .m2-row-acts {
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .15s ease;
}
html[class*="active-theme-"] .ReactVirtualized__Table__row:hover > .m2-row-acts,
html[class*="active-theme-"] .ReactVirtualized__Table__row > .m2-row-acts:focus-within { opacity: 1; }
html[class*="active-theme-"] .ReactVirtualized__Table__row > .m2-row-acts button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--m2-light);
  color: var(--m2-dark);
  cursor: pointer;
}
html[class*="active-theme-"] .ReactVirtualized__Table__row > .m2-row-acts button:hover { background: var(--m2-grad); color: #05141f; }
html[class*="active-theme-"] .ReactVirtualized__Table__row > .m2-row-acts .material-icons { font-size: 18px; }

/* ---------- empty pages say what to do next ---------- */
html[class*="active-theme-"] .m2-empty-cta {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  text-align: center;
}
html[class*="active-theme-"] .m2-empty-cta p {
  max-width: 420px;
  margin: 0;
  color: var(--m2-muted);
  font: 500 14px/1.6 var(--m2-font);
}
html[class*="active-theme-"] .m2-empty-cta > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
html[class*="active-theme-"] .m2-empty-cta button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 12px;
  font: 700 14px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-empty-cta .m2-empty-main {
  padding: 0 16px 0 6px;
  background: var(--m2-grad);
  color: var(--m2-ink);
}
html[class*="active-theme-"] .m2-empty-cta .m2-empty-alt {
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-empty-cta .material-icons { font-size: 20px; }

/* ---------- desktop: notification permission card ---------- */
html[class*="active-theme-"] .m2-note-prompt {
  position: fixed;
  z-index: 70;
  inset-inline-end: 24px;
  bottom: 24px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  gap: 12px;
  width: min(380px, calc(100% - 32px));
  padding: 16px;
  border-radius: 18px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: var(--m2-shadow), inset 0 0 0 1px var(--m2-border);
  font: 400 13px/1.5 var(--m2-font);
  animation: m2-note-in .22s ease-out;
}
html[class*="active-theme-"] .m2-note-prompt .m2-note-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--m2-tone-blue) 14%, transparent);
  color: var(--m2-tone-blue);
  font-size: 22px;
}
html[class*="active-theme-"] .m2-note-prompt[data-mode="off"] .m2-note-tile {
  background: color-mix(in srgb, var(--m2-tone-amber) 16%, transparent);
  color: var(--m2-tone-amber);
}
html[class*="active-theme-"] .m2-note-prompt b {
  display: block;
  margin: 1px 0 2px;
  font: 600 15px/1.3 var(--m2-font-display);
}
html[class*="active-theme-"] .m2-note-prompt p {
  margin: 0 0 12px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-note-prompt .m2-empty-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  text-align: start;
}
html[class*="active-theme-"] .m2-note-prompt .m2-empty-cta button { height: 38px; }
html[class*="active-theme-"] .m2-note-prompt .m2-note-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--m2-muted);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-note-prompt .m2-note-x:hover { background: var(--m2-hover); color: var(--m2-text); }
html[class*="active-theme-"] .m2-note-prompt .m2-note-x .material-icons { font-size: 18px; }
html[class*="active-theme-"] .m2-rec-card[data-mode="saved"] .m2-note-tile {
  background: color-mix(in srgb, var(--m2-tone-green) 15%, transparent);
  color: var(--m2-tone-green);
}
html[class*="active-theme-"] .m2-rec-card[data-mode="space"] .m2-note-tile,
html[class*="active-theme-"] .m2-rec-card[data-mode="fail"] .m2-note-tile {
  background: color-mix(in srgb, var(--m2-tone-amber) 16%, transparent);
  color: var(--m2-tone-amber);
}
@media (max-width: 760px) {
  html[class*="active-theme-"] .m2-rec-card {
    inset-inline: 12px;
    width: auto;
    bottom: calc(84px + max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px)));
  }
}
html[class*="active-theme-"][data-m2-tabs="1"] .m2-rec-card {
  inset-inline: 12px;
  width: auto;
  bottom: calc(84px + max(env(safe-area-inset-bottom, 0px), var(--m2-inset-bottom, 0px)));
}
@keyframes m2-note-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] .m2-note-prompt { animation: none; }
}

/* ---------- search: pick where to look ---------- */
html[class*="active-theme-"] .m2-scope {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 16px;
  background: var(--m2-card);
  box-shadow: 0 12px 28px rgba(5, 20, 31, .16), 0 2px 6px rgba(5, 20, 31, .06);
}
html[class*="active-theme-"] .m2-scope small {
  display: block;
  padding: 6px 10px 4px;
  color: var(--m2-muted);
  font: 700 11.5px/1 var(--m2-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- notifications: security alerts lead somewhere ---------- */
html[class*="active-theme-"] .m2-alert-review {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0 6px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
  font: 700 13px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-alert-review .material-icons { font-size: 18px; }

/* ---------- phone: header buttons fit, edges breathe ---------- */
html[class*="active-theme-"] .m2-thread-vox {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
html[class*="active-theme-"] .m2-thread-vox .material-icons { font-size: 18px; }
html[data-m2-tabs="1"] .m2-thread-vox,
html[data-m2-app="1"] .m2-thread-vox,
html[data-m2-tabs="1"] .m2-alert-review,
html[data-m2-app="1"] .m2-alert-review {
  justify-content: center;
  width: 38px;
  min-width: 38px !important;
  height: 38px;
  min-height: 38px;
  margin: 0 4px !important;
  padding: 0 !important;
}
html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools > .md-icon-button,
html[data-m2-app="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools > .md-icon-button,
html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools > .MuiIconButton-root,
html[data-m2-app="1"] md-dialog.md-dialog-fullscreen-abs > md-toolbar .md-toolbar-tools > .MuiIconButton-root,
html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools > .md-icon-button,
html[data-m2-app="1"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools > .md-icon-button,
html[data-m2-tabs="1"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools > .MuiIconButton-root,
html[data-m2-app="1"] md-dialog.md-dialog-fullscreen > md-toolbar .md-toolbar-tools > .MuiIconButton-root {
  flex: 0 0 auto;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px !important;
}
html[data-m2-tabs="1"] .m2-thread-vox-txt,
html[data-m2-app="1"] .m2-thread-vox-txt,
html[data-m2-tabs="1"] .m2-alert-review-txt,
html[data-m2-app="1"] .m2-alert-review-txt { display: none; }
html[data-m2-tabs="1"] .m2-thread-vox .material-icons,
html[data-m2-app="1"] .m2-thread-vox .material-icons,
html[data-m2-tabs="1"] .m2-alert-review .material-icons,
html[data-m2-app="1"] .m2-alert-review .material-icons { font-size: 20px; }

html[data-m2-tabs="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools,
html[data-m2-app="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline-start: 4px !important;
  padding-inline-end: 4px !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools > .md-icon-button,
html[data-m2-app="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools > .md-icon-button,
html[data-m2-tabs="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools > react-component .MuiIconButton-root,
html[data-m2-app="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools > react-component .MuiIconButton-root {
  flex: 0 0 auto;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px !important;
}
html[data-m2-tabs="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools > h3,
html[data-m2-app="1"] .mail-list-area-near-viewer > md-toolbar:not(.mail-toolbar-view) .md-toolbar-tools > h3 { display: none; }
html[data-m2-tabs="1"] .mail-list-area-near-viewer .m2-qsearch,
html[data-m2-app="1"] .mail-list-area-near-viewer .m2-qsearch {
  margin: 0 4px !important;
  padding: 0 12px;
  text-overflow: ellipsis;
}

html[data-m2-tabs="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools,
html[data-m2-app="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools {
  box-sizing: border-box;
  padding-inline-end: 12px;
}
html[data-m2-tabs="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > span.ellipsis.flex,
html[data-m2-app="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > span.ellipsis.flex,
html[data-m2-tabs="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > h3,
html[data-m2-app="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > h3,
html[data-m2-tabs="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > h2,
html[data-m2-app="1"] md-content#content md-toolbar:not(md-dialog md-toolbar) .md-toolbar-tools > h2 {
  font: 600 19px/1.2 var(--m2-font-display) !important;
  color: var(--m2-text);
}

html[class*="active-theme-"][data-m2-tabs="1"] md-content#content .m2-hub-tabs,
html[class*="active-theme-"][data-m2-app="1"] md-content#content .m2-hub-tabs {
  display: flex;
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: none;
  margin: 10px 12px 8px;
}
html[class*="active-theme-"][data-m2-tabs="1"] md-content#content .m2-hub-tabs button,
html[class*="active-theme-"][data-m2-app="1"] md-content#content .m2-hub-tabs button {
  flex: 1 1 0;
  min-width: 0;
}
html[data-m2-tabs="1"] md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item .md-list-item-text,
html[data-m2-app="1"] md-content#content .chat-tabs .ReactVirtualized__Grid md-list-item .md-list-item-text {
  box-sizing: border-box;
  padding-inline-end: 14px !important;
}

.m2-navsheet .m2-sheet-item > small {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--m2-hover);
  color: var(--m2-primary);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal > .MuiDrawer-paperAnchorRight md-toolbar {
  background: linear-gradient(135deg, var(--m2-ink), var(--m2-navy)) !important;
  color: #e6f4fa !important;
  border-bottom: 1px solid rgba(85, 200, 232, .14);
  box-shadow: none !important;
}
html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal > .MuiDrawer-paperAnchorRight md-toolbar .md-button,
html[class*="active-theme-"] .react-sidenav.MuiDrawer-modal > .MuiDrawer-paperAnchorRight md-toolbar .material-icons {
  color: #cfe6f1 !important;
}

html[data-m2-tabs="1"] body:not([dir="rtl"]) md-toolbar .md-toolbar-tools > .md-button:not(.md-icon-button):last-child,
html[data-m2-app="1"] body:not([dir="rtl"]) md-toolbar .md-toolbar-tools > .md-button:not(.md-icon-button):last-child { margin-right: 0 !important; }
html[data-m2-tabs="1"] body[dir="rtl"] md-toolbar .md-toolbar-tools > .md-button:not(.md-icon-button):last-child,
html[data-m2-app="1"] body[dir="rtl"] md-toolbar .md-toolbar-tools > .md-button:not(.md-icon-button):last-child { margin-left: 0 !important; }
md-fab-actions .md-fab-action-item:not(:has(*)) { display: none !important; }
body:not(.light-mode) .m2-sheet-panel {
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 var(--m2-border);
}
body:not(.light-mode) .m2-sheet-grip,
body:not(.light-mode) .m2-sheet-sep { background: var(--m2-border); }
body:not(.light-mode) .m2-sheet-item,
body:not(.light-mode) .m2-navsheet .m2-sheet-item > span:not(.material-icons) { color: var(--m2-text); }
body:not(.light-mode) .m2-sheet-item small { color: var(--m2-muted); }
body:not(.light-mode) .m2-sheet-item .material-icons { color: var(--m2-primary); }
body:not(.light-mode) .m2-sheet-item.is-on { background: var(--m2-selected); }
body:not(.light-mode) .m2-sheet-item:active { background: var(--m2-hover); }
body:not(.light-mode) .m2-navsheet .m2-sheet-item > small { background: var(--m2-selected); color: var(--m2-primary); }

/* react-virtualized pins direction: ltr on its grid; rows follow the page in Arabic. */
body[dir="rtl"] .ReactVirtualized__Grid__innerScrollContainer > md-list-item { direction: rtl; }
body[dir="rtl"] .ReactVirtualized__Grid__innerScrollContainer > md-list-item :is(h3, h4, p, .inline) {
  unicode-bidi: plaintext;
  text-align: right;
}
body[dir="rtl"] .ReactVirtualized__Grid__innerScrollContainer > md-list-item :is(h3, h4, p, .inline) span {
  direction: ltr;
  unicode-bidi: plaintext;
}
body[dir="rtl"] .ReactVirtualized__Grid__innerScrollContainer > md-list-item .above-star {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 760px) and (max-height: 860px) {
  html[data-m2-home="1"] .m2h-safeline { margin-inline-end: 72px !important; width: auto !important; }
  html[data-m2-home="1"] .m2h-safeline small { display: none; }
}

html[data-m2-pip="1"] .m2-inside-bar { display: none; }
html[data-m2-native="1"] md-dialog.md-dialog-fullscreen-abs { padding-bottom: var(--m2-ime, 0px); }
.m2-call-permit { display: block; width: min(560px, calc(100% - 32px)); margin: 8px auto 0; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--m2-grad); color: var(--m2-ink); font: 600 14px/1.3 var(--m2-font); }

html[class*="active-theme-"] .mail-reply md-icon[class*="spam-check"],
html[class*="active-theme-"] .mail-reply .m2-auth-inline { display: none !important; }
html[class*="active-theme-"] .mail-reply .md-list-item-inner {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
html[class*="active-theme-"] .mail-reply .md-list-item-inner button,
html[class*="active-theme-"] .mail-reply .md-list-item-inner a,
html[class*="active-theme-"] .mail-reply .md-list-item-inner [role="button"] { pointer-events: auto; }
html[class*="active-theme-"] .mail-reply h4.m2-to-solo { display: none; }
html[class*="active-theme-"] .mail-reply .other-to-bcc { padding-inline-start: 0 !important; }
html[class*="active-theme-"] .m2-shield {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-inline-start: 8px;
  padding: 0 3px 0 2px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-shield-tone);
  color: var(--m2-on-tone);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--m2-shield-tone) 38%, transparent);
  font: 600 12px/1 var(--m2-font);
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  transition: filter .15s ease, box-shadow .15s ease;
}
html[class*="active-theme-"] .m2-shield:hover {
  filter: brightness(1.06);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--m2-shield-tone) 50%, transparent);
}
html[class*="active-theme-"] .m2-shield > .m2-shield-word:last-child { padding-inline-end: 8px; }
html[class*="active-theme-"] .m2-shield-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--m2-ink);
  color: var(--m2-light);
  box-shadow: inset 0 0 0 1px var(--m2-navy);
}
html[class*="active-theme-"] .m2-shield-mark svg { width: 20px; height: 20px; display: block; }
html[class*="active-theme-"] .m2-shield .m2-shield-mark {
  width: 26px;
  height: 26px;
  background: var(--m2-ink);
  color: var(--m2-on-tone);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--m2-on-tone) 55%, transparent);
}
html[class*="active-theme-"] body:not(.light-mode) .m2-shield .m2-shield-mark {
  background: var(--m2-on-tone);
  color: var(--m2-ink);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--m2-ink) 30%, transparent);
}
html[class*="active-theme-"] .m2-shield .m2-shield-mark svg { width: 23px; height: 23px; overflow: visible; }
html[class*="active-theme-"] .m2-shield .m2-shield-mark path:last-of-type { fill: var(--m2-shield-tone); }
html[class*="active-theme-"] .m2-shield:not(.m2-shield-neutral) .m2-shield-mark path:nth-child(1),
html[class*="active-theme-"] .m2-shield:not(.m2-shield-neutral) .m2-shield-mark path:nth-child(2) {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: m2-shield-scan .9s cubic-bezier(.5, 0, .2, 1) both;
}
html[class*="active-theme-"] .m2-shield:not(.m2-shield-neutral):hover .m2-shield-mark path:nth-child(1),
html[class*="active-theme-"] .m2-shield:not(.m2-shield-neutral):hover .m2-shield-mark path:nth-child(2) {
  animation-name: m2-shield-scan-again;
}
html[class*="active-theme-"] .m2-shield:not(.m2-shield-neutral) .m2-shield-mark path:last-of-type {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: m2-shield-pop .5s .55s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes m2-shield-scan { from { transform: rotate(-180deg); } to { transform: rotate(0deg); } }
@keyframes m2-shield-scan-again { from { transform: rotate(-180deg); } to { transform: rotate(0deg); } }
@keyframes m2-shield-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[class*="active-theme-"] .m2-shield .m2-shield-mark path { animation: none !important; }
}
html[class*="active-theme-"] .m2-shield .m2-shield-word { color: var(--m2-on-tone); }
html[class*="active-theme-"] .m2-shield-card .m2-shield-word { color: var(--m2-shield-tone); }
html[class*="active-theme-"] .m2-shield-score {
  font: 700 11px/1 var(--m2-font);
  color: var(--m2-on-tone);
  background: var(--m2-ink);
  padding: 5px 8px;
  border-radius: 999px;
}
html[class*="active-theme-"] body:not(.light-mode) .m2-shield .m2-shield-score {
  color: var(--m2-ink);
  background: var(--m2-on-tone);
}
html[class*="active-theme-"] body:not(.light-mode) .m2-shield-card .m2-shield-mark {
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-shield-ok { --m2-shield-tone: var(--m2-tone-green); }
html[class*="active-theme-"] .m2-shield-warn,
html[class*="active-theme-"] .m2-shield-banner.m2-shield-warn { --m2-shield-tone: var(--m2-tone-amber); }
html[class*="active-theme-"] .m2-shield-bad,
html[class*="active-theme-"] .m2-shield-banner.m2-shield-bad { --m2-shield-tone: var(--m2-tone-red); }
html[class*="active-theme-"] .m2-shield-m2 { --m2-shield-tone: var(--m2-primary); }
html[class*="active-theme-"] .m2-shield.m2-shield-m2 {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m2-primary) 28%, transparent);
}
html[class*="active-theme-"] .m2-shield-neutral,
html[class*="active-theme-"] .m2-shield-external { --m2-shield-tone: var(--m2-muted); }
html[class*="active-theme-"] .md-list-item-text > .m2-shield {
  align-self: flex-start;
  margin: 6px 0 2px;
}
html[class*="active-theme-"] .m2-shield-banner {
  margin: 8px 16px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--m2-tone-amber) 16%, var(--m2-card));
  font: 600 13px/1.4 var(--m2-font);
}
html[class*="active-theme-"] .m2-shield-banner.m2-shield-bad {
  background: color-mix(in srgb, var(--m2-tone-red) 14%, var(--m2-card));
}
html[class*="active-theme-"] md-tooltip:has([translate*="ANTISPAM"]),
html[class*="active-theme-"] md-tooltip:has([translate*="SCANNED"]) { display: none !important; }
html[class*="active-theme-"] .m2-shield-card {
  position: fixed;
  z-index: 100001;
  box-sizing: border-box;
  width: min(360px, calc(100% - 24px));
  max-height: min(84vh, 660px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: var(--m2-card);
  box-shadow: var(--m2-shadow-hover);
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-shield-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 8px 6px;
}
html[class*="active-theme-"] .m2-shield-ai {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--m2-border);
}
html[class*="active-theme-"] .m2-shield-ai .m2h-ico { width: 28px; height: 28px; border-radius: 8px; }
html[class*="active-theme-"] .m2-shield-ai .m2h-ico svg { width: 16px; height: 16px; }
html[class*="active-theme-"] .m2-shield-ai-out {
  min-width: 0;
  color: var(--m2-text);
  font: 400 13px/18px var(--m2-font);
}
html[class*="active-theme-"] .m2-shield-head .m2-shield-mark { width: 40px; height: 40px; }
html[class*="active-theme-"] .m2-shield-head .m2-shield-mark { flex: 0 0 auto; }
html[class*="active-theme-"] .m2-shield-head .m2-shield-mark svg { width: 36px; height: 36px; }
html[class*="active-theme-"] .m2-shield-head > div { min-width: 0; }
html[class*="active-theme-"] .m2-shield-head b {
  display: block;
  font: 600 16px/1.2 var(--m2-font-display);
  color: var(--m2-shield-tone);
}
html[class*="active-theme-"] .m2-shield-head small {
  display: block;
  margin-top: 2px;
  color: var(--m2-muted);
  font: 500 12px/1.3 var(--m2-font);
}
html[class*="active-theme-"] .m2-shield-ring {
  width: 60px;
  height: 60px;
  margin-inline-start: auto;
  border-radius: 999px;
  background: conic-gradient(var(--m2-shield-tone) calc(var(--m2-score) * 1%), var(--m2-border) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
html[class*="active-theme-"] .m2-shield-ring span {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--m2-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
html[class*="active-theme-"] .m2-shield-head .m2-shield-ring b {
  font: 700 18px/1 var(--m2-font-display);
  color: var(--m2-shield-tone);
}
html[class*="active-theme-"] .m2-shield-head .m2-shield-ring small {
  margin: 0;
  font: 600 9px/1 var(--m2-font);
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-shield-row,
html[class*="active-theme-"] .m2-shield-act {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 4px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--m2-text);
  font: 500 14px/1.3 var(--m2-font);
  text-align: start;
}
html[class*="active-theme-"] .m2-shield-row .material-icons {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 18px;
}
html[class*="active-theme-"] .m2-shield-card .m2-shield-row,
html[class*="active-theme-"] .m2-shield-card .m2-shield-act { box-sizing: border-box; }
html[class*="active-theme-"] .m2-shield-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
html[class*="active-theme-"] .m2-shield-copy small { color: var(--m2-muted); font: 500 12px/1.3 var(--m2-font); }
html[class*="active-theme-"] .m2-shield-chip {
  margin-inline-start: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 11px/1.2 var(--m2-font);
  font-style: normal;
  white-space: nowrap;
  flex: 0 0 auto;
}
html[class*="active-theme-"] .m2-shield-row.is-pass .material-icons,
html[class*="active-theme-"] .m2-shield-row.is-pass .m2-shield-chip {
  background: color-mix(in srgb, var(--m2-tone-green) 16%, transparent);
  color: var(--m2-tone-green);
}
html[class*="active-theme-"] .m2-shield-row.is-warn .material-icons,
html[class*="active-theme-"] .m2-shield-row.is-warn .m2-shield-chip {
  background: color-mix(in srgb, var(--m2-tone-amber) 16%, transparent);
  color: var(--m2-tone-amber);
}
html[class*="active-theme-"] .m2-shield-row.is-fail .material-icons,
html[class*="active-theme-"] .m2-shield-row.is-fail .m2-shield-chip {
  background: color-mix(in srgb, var(--m2-tone-red) 16%, transparent);
  color: var(--m2-tone-red);
}
html[class*="active-theme-"] .m2-shield-row.is-skip .material-icons,
html[class*="active-theme-"] .m2-shield-row.is-skip .m2-shield-chip {
  background: var(--m2-hover);
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-shield-act { cursor: pointer; color: var(--m2-dark); }
html[class*="active-theme-"] .m2-shield-act:hover,
html[class*="active-theme-"] .m2-shield-row:hover { background: var(--m2-hover); }
html[class*="active-theme-"] .m2-shield-dot {
  position: absolute;
  top: 14px;
  inset-inline-end: 12px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--m2-shield-tone);
  box-shadow: 0 0 0 2px var(--m2-card);
  pointer-events: none;
}
html[class*="active-theme-"] .m2-go-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--m2-ink) 55%, transparent);
  backdrop-filter: blur(3px);
}
html[class*="active-theme-"] .m2-go-card {
  box-sizing: border-box;
  width: min(400px, 100%);
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: var(--m2-card);
  box-shadow: inset 0 0 0 1px var(--m2-border), var(--m2-shadow-hover);
  color: var(--m2-text);
  font: 500 14px/1.5 var(--m2-font);
  text-align: start;
}
html[class*="active-theme-"] .m2-go-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--m2-shield-tone) 16%, transparent);
  color: var(--m2-shield-tone);
  font-size: 24px;
}
html[class*="active-theme-"] .m2-go-title {
  display: block;
  margin: 12px 0 4px;
  font: 600 19px/1.3 var(--m2-font-display);
}
html[class*="active-theme-"] .m2-go-card p { margin: 0 0 10px; color: var(--m2-muted); }
html[class*="active-theme-"] .m2-go-host {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--m2-bg);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  color: var(--m2-text);
  font: 700 14px/1.3 var(--m2-font);
  word-break: break-all;
}
html[class*="active-theme-"] .m2-go-card .m2-go-hide {
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--m2-tone-red) 12%, transparent);
  color: var(--m2-tone-red);
  font-weight: 600;
}
html[class*="active-theme-"] .m2-go-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}
html[class*="active-theme-"] .m2-go-actions button {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-go-stay {
  background: var(--m2-grad);
  color: var(--m2-ink);
  box-shadow: 0 6px 16px var(--m2-glow);
}
html[class*="active-theme-"] .m2-go-open {
  background: transparent;
  color: var(--m2-muted);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-go-open:hover { background: var(--m2-hover); color: var(--m2-text); }

/* Big-file card inside the composer. The blot paints its own inline styles. */
.ql-embeded-html[data-m2-file] {
  margin: 8px 0 !important;
  max-width: 100%;
}
.ql-embeded-html[data-m2-file] hr { display: none !important; }
.ql-embeded-html[data-m2-file] table {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--m2-card) !important;
  border: 1px solid var(--m2-border) !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
}
.ql-embeded-html[data-m2-file] a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  background: transparent !important;
  color: var(--m2-text) !important;
  text-decoration: none !important;
  white-space: normal !important;
}
.ql-embeded-html[data-m2-file] a > div {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  vertical-align: middle !important;
  text-align: start !important;
  color: var(--m2-muted) !important;
}
.ql-embeded-html[data-m2-file] a > div { flex: 1 1 auto !important; }
.ql-embeded-html[data-m2-file] img[src*="attachment.png"] { display: none !important; }
.ql-embeded-html[data-m2-file] h6 {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--m2-text) !important;
}
.ql-embeded-html[data-m2-file] small { display: none !important; }
.ql-embeded-html[data-m2-file] .m2-file-tile {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.ql-embeded-html[data-m2-file] .m2-file-tile img {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
}
.ql-embeded-html[data-m2-file] .m2-file-size {
  margin-top: 2px;
  color: var(--m2-muted) !important;
  font: 500 12px/16px var(--m2-font);
}
.ql-embeded-html[data-m2-file] .m2-file-bar {
  display: block;
  width: 140px;
  max-width: 100%;
  height: 4px;
  margin-top: 8px;
  border-radius: 99px;
  background: var(--m2-hover);
  overflow: hidden;
}
.ql-embeded-html[data-m2-file] .m2-file-bar > span {
  display: block;
  height: 100%;
  background: var(--m2-grad);
}
.ql-embeded-html[data-m2-file] .m2-file-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  color: var(--m2-text);
  font: 600 12px/16px var(--m2-font);
}
.ql-embeded-html[data-m2-file][data-m2-state="ready"] .m2-file-chip {
  flex-direction: row;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--m2-hover);
}
.ql-embeded-html[data-m2-file] .m2-file-chip .material-icons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: var(--m2-primary);
}
#m2-file-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--m2-card);
  color: var(--m2-text);
  border: 1px solid var(--m2-border);
  box-shadow: var(--m2-shadow);
  font: 600 14px/1.4 var(--m2-font);
  opacity: 0;
  pointer-events: none;
}
#m2-file-toast[data-m2-on="1"] { opacity: 1; }

#m2-cal {
  width: min(1240px, calc(100% - 44px));
  margin: 0 auto;
  padding: 0 0 16px;
  box-sizing: border-box;
  color: var(--m2-text);
  font-family: var(--m2-font);
}
md-content#content[data-m2-cal="1"] { overflow-x: hidden; }
md-content#content[data-m2-cal="1"] > :not(#m2-cal) { display: none !important; }
html[class*="active-theme-"] #m2-cal .m2-cal-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  margin-bottom: 16px;
  padding: 0 !important;
  background: var(--m2-card);
  box-shadow: 0 0 0 100vmax var(--m2-card), 0 1px 0 100vmax var(--m2-border);
  clip-path: inset(0 -100vmax -1px);
}
html[class*="active-theme-"] #m2-cal .m2-cal-menu {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--m2-text);
  cursor: pointer;
}
html[class*="active-theme-"] #m2-cal .m2-cal-menu:hover { background: var(--m2-hover); }
html[class*="active-theme-"] #m2-cal .m2-cal-menu .material-icons { font-size: 24px; color: var(--m2-text) !important; }
html[data-m2-rail="1"] #m2-cal .m2-cal-menu { display: none; }
.m2-cal-title { flex: 0 0 auto; margin: 0; font: 600 19px/1.2 var(--m2-font-display); color: var(--m2-text); }
html[class*="active-theme-"] #m2-cal .m2-cal-tools > .m2-page-head {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  margin: 0;
}
html[class*="active-theme-"] #m2-cal .m2-page-head .m2-head-search {
  flex: 0 1 380px;
  justify-content: flex-start;
  padding: 0 14px;
  cursor: text;
}
.m2-cal-find input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--m2-text);
  font: 500 14px/1.2 var(--m2-font);
}
.m2-cal-find input::placeholder { color: var(--m2-muted); }
.m2-cal-card {
  padding: 16px;
  background: var(--m2-card);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
.m2-cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.m2-cal-navline, .m2-cal-strip { display: flex; align-items: center; gap: 6px; min-width: 0; }
.m2-cal-navline strong { min-width: 0; margin: 0 6px; font: 600 16px/1.2 var(--m2-font-display); white-space: nowrap; }
.m2-cal-navline button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  font: 600 13.5px/1 var(--m2-font-display);
  cursor: pointer;
}
.m2-cal-navline button[data-cal="prev"], .m2-cal-navline button[data-cal="next"] { padding: 0; }
.m2-cal-navline button:hover { background: var(--m2-hover); }
html[dir="rtl"] .m2-cal-navline .material-icons { transform: scaleX(-1); }
.m2-cal-views {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--m2-hover);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
.m2-cal-views button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--m2-muted);
  font: 600 13.5px/1 var(--m2-font-display);
  cursor: pointer;
}
.m2-cal-views button.on {
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: 0 1px 2px rgba(5, 20, 31, .08), inset 0 0 0 1px var(--m2-border);
}
.m2-cal-strip { width: 100%; }
.m2-cal-strip button {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 56px;
  border: 0;
  border-radius: 14px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  font: 700 15px/1 var(--m2-font-display);
  cursor: pointer;
}
.m2-cal-strip button b { color: var(--m2-muted); font: 600 11px/1 var(--m2-font); }
.m2-cal-strip button.on { background: var(--m2-grad); color: var(--m2-ink); box-shadow: none; }
.m2-cal-strip button.on b { color: var(--m2-ink); }
.m2-cal-dow, .m2-cal-grid, .m2-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.m2-cal-dow { margin: 16px 0 8px; padding: 0 8px; color: var(--m2-muted); font: 600 12px/1 var(--m2-font); }
.m2-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  min-height: 92px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  text-align: start;
  font: 600 13px/1.2 var(--m2-font);
  overflow: hidden;
  cursor: pointer;
}
.m2-cal-cell:hover { background: var(--m2-hover); }
.m2-cal-cell em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font: 600 13px/1 var(--m2-font-display);
  font-style: normal;
}
.m2-cal-now em, .m2-cal-week .m2-cal-now > button[data-cal="day"] { background: var(--m2-grad); color: var(--m2-ink); }
.m2-cal-cell span {
  display: block;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--m2-selected);
  color: var(--m2-text);
  font: 600 12px/1.3 var(--m2-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m2-cal-out { opacity: .45; }
.m2-cal-week { margin-top: 16px; }
.m2-cal-week section {
  min-width: 0;
  min-height: 420px;
  padding: 6px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
.m2-cal-week section > button {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--m2-hover);
  color: var(--m2-text);
  font: 600 13px/1 var(--m2-font-display);
  cursor: pointer;
}
.m2-cal-week section > p { margin: 10px 4px; color: var(--m2-muted); font: 500 12px/1.3 var(--m2-font); }
.m2-cal-event {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 0;
  border-inline-start: 3px solid var(--m2-primary);
  border-radius: 12px;
  background: var(--m2-hover);
  color: var(--m2-text);
  text-align: start;
  font: 600 14px/1.3 var(--m2-font);
  cursor: pointer;
}
.m2-cal-event:hover { background: var(--m2-selected); }
.m2-cal-event b { display: block; margin-bottom: 2px; color: var(--m2-muted); font: 600 12px/1.2 var(--m2-font); }
.m2-cal-event span, .m2-cal-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-cal-event small { color: var(--m2-muted); font: 500 12px/1.3 var(--m2-font); }
.m2-cal-agenda h3 { margin: 18px 0 4px; color: var(--m2-muted); font: 600 13px/1.2 var(--m2-font-display); }
.m2-cal-agenda { margin-top: 8px; }
.m2-cal-empty, .m2-cal-down { margin: 36px 0 24px; color: var(--m2-muted); text-align: center; }
.m2-cal-empty .no-things-text { margin: 0 0 14px; font: 500 15px/1.4 var(--m2-font); }
.m2-cal-empty .m2-empty-cta > div { display: flex; justify-content: center; }
.m2-cal-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--m2-ink) 45%, transparent);
}
.m2-cal-dialog[hidden] { display: none !important; }
.m2-cal-sheet {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  padding: 18px;
  box-sizing: border-box;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border), var(--m2-shadow);
}
.m2-cal-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.m2-cal-sheet-head h2 { flex: 1; margin: 0; font: 600 17px/1.2 var(--m2-font-display); }
.m2-cal-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--m2-muted);
  cursor: pointer;
}
.m2-cal-x:hover { background: var(--m2-hover); color: var(--m2-text); }
.m2-cal-tile {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--m2-primary) 16%, transparent);
  color: var(--m2-primary);
}
.m2-cal-tile .material-icons { font-size: 19px; }
.m2-cal-when { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(150px, 1fr) minmax(150px, 1fr); gap: 8px; }
.m2-cal-sheet label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-top: 12px;
  color: var(--m2-muted);
  font: 600 12.5px/1.3 var(--m2-font);
}
.m2-cal-sheet input, .m2-cal-sheet textarea {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: transparent;
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  color-scheme: light dark;
  font: 500 14px/1.3 var(--m2-font);
}
.m2-cal-sheet textarea { height: 84px; padding: 10px 12px; resize: vertical; }
.m2-cal-sheet input[type="time"] { padding-inline: 10px 2px; }
.m2-cal-sheet input[type="time"]::-webkit-datetime-edit { padding: 0; }
.m2-cal-sheet input[type="time"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0 2px; }
.m2-cal-sheet input:focus, .m2-cal-sheet textarea:focus { box-shadow: inset 0 0 0 2px var(--m2-primary); }
.m2-cal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.m2-cal-actions [data-cal="delete"] { margin-inline-end: auto; }
.react-sidenav [data-m2-calnav] .material-icons { color: inherit; }
.m2-caldav {
  display: flex;
  gap: 12px;
  margin: 0 14px 10px;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid var(--m2-border);
  border-radius: 14px;
  background: var(--m2-card);
  color: var(--m2-text);
}
.m2-caldav-body { min-width: 0; flex: 1; }
.m2-caldav h2 { margin: 0 0 6px; font: 600 16px/1.3 var(--m2-font-display); }
.m2-caldav p, .m2-caldav li { margin: 0 0 6px; color: var(--m2-muted); font: 500 14px/1.45 var(--m2-font); }
.m2-caldav-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 0 8px;
}
.m2-caldav-line span { flex: 0 0 auto; color: var(--m2-muted); font: 600 12px/1.3 var(--m2-font); }
.m2-caldav-line b {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m2-text);
  font: 500 14px/1.3 var(--m2-font);
}
.m2-caldav-copy {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  font: 700 13px/1 var(--m2-font);
  cursor: pointer;
}
.m2-caldav-copy:hover { background: var(--m2-hover); }
.m2-caldav-steps { margin: 4px 0 12px; padding-inline-start: 18px; }
.m2-caldav-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m2-cal-add { margin: 0 0 12px; }
.m2-offline { margin: 8px; }
.m2-off-badge { margin-inline-start: 8px; color: var(--m2-primary); font-size: 18px; }
.m2h-today button {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
@media (max-width: 760px) {
  #m2-cal, .m2-caldav { width: auto; margin: 8px; }
  .m2-cal-views [data-view="month"], .m2-cal-views [data-view="week"], .m2-cal-month, .m2-cal-week { display: none; }
}
html[class*="active-theme-"] .m2-cal-actions button:not(.m2-cal-x),
html[class*="active-theme-"] .m2-cal-add,
html[class*="active-theme-"] .m2-caldav .m2-empty-main,
html[class*="active-theme-"] .m2-caldav .m2-empty-alt,
html[class*="active-theme-"] .m2-offline {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 700 14px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-cal-actions .m2-empty-main,
html[class*="active-theme-"] .m2-caldav .m2-empty-main,
html[class*="active-theme-"] .m2-cal-add {
  background: var(--m2-grad);
  color: var(--m2-ink);
}
html[class*="active-theme-"] .m2-cal-actions .m2-empty-alt,
html[class*="active-theme-"] .m2-caldav .m2-empty-alt,
html[class*="active-theme-"] .m2-offline {
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
}
html[class*="active-theme-"] .m2-cal-actions .m2-empty-alt:hover,
html[class*="active-theme-"] .m2-caldav .m2-empty-alt:hover,
html[class*="active-theme-"] .m2-offline:hover { background: var(--m2-hover); }
html[class*="active-theme-"] .m2-cal-actions [data-cal="delete"] { color: #e11d48; }
@media (max-width: 760px) {
  #m2-cal { width: auto; margin: 0 8px; padding-bottom: 96px; }
  html[class*="active-theme-"] #m2-cal .m2-cal-tools { min-height: 56px; }
  html[class*="active-theme-"] #m2-cal .m2-page-head .m2-head-search { flex: 1 1 auto; }
  html[class*="active-theme-"] #m2-cal .m2-page-head .m2-head-new { padding: 0 6px; }
  html[class*="active-theme-"] #m2-cal .m2-page-head .m2-head-new { font-size: 0; gap: 0; }
  .m2-cal-card { padding: 12px; }
  .m2-cal-when { grid-template-columns: 1fr 1fr; }
  .m2-cal-when label:first-child { grid-column: 1 / -1; }
}
.m2-off-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  position: fixed;
  z-index: 40;
  top: 6px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(460px, calc(100% - 560px));
  height: 34px;
  margin: 0;
  padding: 0 6px 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--m2-border);
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: var(--m2-shadow);
  font: 500 13px/1 var(--m2-font);
}
.m2-off-banner > .material-icons { flex: none; font-size: 20px; color: var(--m2-primary); }
.m2-off-banner > b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px/1 var(--m2-font-display); }
.m2-off-banner > b:last-child { padding-inline-end: 8px; }
.m2-off-banner details { position: relative; flex: none; }
.m2-off-banner summary {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--m2-hover);
  color: var(--m2-text);
  font: 700 12px/1 var(--m2-font);
  cursor: pointer;
  list-style: none;
}
.m2-off-banner summary::-webkit-details-marker { display: none; }
.m2-off-banner summary.m2-off-warn { background: color-mix(in srgb, var(--m2-tone-amber) 16%, transparent); color: var(--m2-tone-amber); }
.m2-off-banner summary.m2-off-warn .material-icons { color: inherit; }
.m2-off-banner li span { flex-basis: 120px; }
.m2-off-banner summary .material-icons { font-size: 18px; color: var(--m2-muted); }
.m2-off-banner ul {
  position: absolute;
  top: calc(100% + 10px);
  right: -6px;
  width: 340px;
  max-height: 320px;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--m2-card);
  box-shadow: var(--m2-shadow), inset 0 0 0 1px var(--m2-border);
}
html[dir="rtl"] .m2-off-banner ul, body[dir="rtl"] .m2-off-banner ul { right: auto; left: -6px; }
.m2-off-banner li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 40px; padding: 6px 8px; border-radius: 12px; }
.m2-off-banner li + li { margin-top: 2px; }
.m2-off-banner li span { flex: 1 1 160px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px/1.3 var(--m2-font); color: var(--m2-text); }
.m2-off-banner li em { font: 500 12px/1.3 var(--m2-font); font-style: normal; color: var(--m2-muted); }
.m2-off-banner li button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  font: 700 12px/1 var(--m2-font);
  cursor: pointer;
}
.m2-off-banner li button:hover { background: var(--m2-hover); }
.m2-off-banner li button.m2-off-drop { box-shadow: none; background: transparent; color: var(--m2-muted); }
.m2-off-banner li button.m2-off-drop:hover { background: var(--m2-hover); color: var(--m2-text); }
html[data-m2-offline="1"] [data-vox="join"],
html[data-m2-offline="1"] [data-vox="now"],
html[data-m2-offline="1"] button[ngf-select],
html[data-m2-offline="1"] input[ngf-select] {
  opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 760px) {
  .m2-off-banner,
  html[dir="rtl"] .m2-off-banner,
  body[dir="rtl"] .m2-off-banner {
    top: auto;
    right: 84px;
    bottom: 78px;
    left: 12px;
    transform: none;
    width: auto;
    max-width: none;
  }
  html[dir="rtl"] .m2-off-banner,
  body[dir="rtl"] .m2-off-banner { right: 12px; left: 84px; }
  .m2-off-banner > b { flex: 1 1 auto; }
  .m2-off-banner ul,
  html[dir="rtl"] .m2-off-banner ul,
  body[dir="rtl"] .m2-off-banner ul {
    top: auto;
    bottom: calc(100% + 10px);
    right: -6px;
    left: auto;
    width: min(340px, calc(100vw - 24px));
  }
}

/* AI assistant. Same tokens as the rest of the app. */
html[class*="active-theme-"] .m2-ai-card {
  margin: 4px 4px 14px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--m2-border);
}
html[class*="active-theme-"] .m2-ai-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
html[class*="active-theme-"] .m2-ai-head > .material-icons {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--m2-hover);
  color: var(--m2-primary);
  font-size: 19px;
}
html[class*="active-theme-"] .m2-ai-head h3 {
  margin: 0;
  font-family: var(--m2-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--m2-text);
}
html[class*="active-theme-"] .m2-ai-head p,
html[class*="active-theme-"] .m2-ai-note,
html[class*="active-theme-"] .m2-ai-meet {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--m2-muted);
}
html[class*="active-theme-"] .m2-ai-head p {
  white-space: pre-line;
}
html[class*="active-theme-"] .m2-ai-row,
html[class*="active-theme-"] .m2-ai-compose,
html[class*="active-theme-"] .m2-ai-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 10px;
}
html[class*="active-theme-"] .m2-ai-compose,
html[class*="active-theme-"] .m2-ai-mail {
  padding: 8px 10px;
  box-sizing: border-box;
}
html[class*="active-theme-"] .main-html-render-holder > .m2-ai-mail {
  margin: 4px 8px 12px;
}
html[class*="active-theme-"] .m2-ai-go {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--m2-grad);
  color: var(--m2-ink);
  font: 700 13px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-ai-go .material-icons {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--m2-card);
  color: var(--m2-ink);
  font-size: 15px;
}
html[class*="active-theme-"] .m2-ai-tone {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px var(--m2-border);
  font: 700 13px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] form.login-form .m2-ai-card .m2-ai-row {
  gap: 10px;
}
html[class*="active-theme-"] form.login-form .m2-ai-card .m2-ai-state {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--m2-light);
  color: var(--m2-dark);
  font: 700 13px/1 var(--m2-font);
}
html[class*="active-theme-"] form.login-form .m2-ai-card .m2-ai-state[data-on="0"] {
  background: var(--m2-hover);
  color: var(--m2-muted);
}
html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-go,
html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-tone {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
}
html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-go {
  height: 40px;
  padding-block: 0;
  padding-inline: 6px 16px;
  animation: m2-new-pulse 1.6s ease-in-out infinite;
}
html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-go:hover {
  animation: none;
  box-shadow: 0 10px 22px rgba(8, 145, 178, .42);
}
html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-tone {
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font: 700 14px/1 var(--m2-font);
}
html[class*="active-theme-"] form.login-form .m2-ai-card button.m2-ai-tone .material-icons {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--m2-icon);
  font-size: 18px;
}
html[class*="active-theme-"] .m2-ai-tone.is-on,
html[class*="active-theme-"] .m2-ai-tone:hover {
  background: var(--m2-selected);
}
html[class*="active-theme-"] .m2-ai-out,
html[class*="active-theme-"] .m2-ai-meet {
  flex: 1 1 100%;
  white-space: pre-wrap;
  color: var(--m2-text);
  background: var(--m2-card);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--m2-border);
  padding: 10px 12px;
}
html[class*="active-theme-"] .m2-ai-out:empty,
html[class*="active-theme-"] .m2-ai-meet:empty {
  display: none;
}

/* One spark, the same size as the icon buttons already in the row. */
html[class*="active-theme-"] .m2-ai-spark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--m2-primary);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-ai-spark .material-icons,
html[class*="active-theme-"] .m2-ai-spark svg { width: 22px; height: 22px; font-size: 22px; }
html[class*="active-theme-"] .m2-mhead-ask { color: var(--m2-dark); overflow: hidden; }
html[class*="active-theme-"] .m2-mhead-ask svg { width: 20px; height: 20px; position: relative; z-index: 1; }
html[class*="active-theme-"] .m2-ask {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 72px 16px 16px;
  background: color-mix(in srgb, var(--m2-text) 28%, transparent);
}
html[class*="active-theme-"] .m2-ask[hidden] { display: none; }
html[class*="active-theme-"] .m2-ask-card {
  box-sizing: border-box;
  width: min(420px, 100%);
  max-height: min(640px, calc(100% - 88px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--m2-border);
  border-radius: 18px;
  background: var(--m2-card);
  color: var(--m2-text);
  box-shadow: var(--m2-shadow-hover);
}
@media (max-width: 760px) {
  html[class*="active-theme-"] .m2-ask { align-items: flex-end; padding: 0; }
  html[class*="active-theme-"] .m2-ask-card {
    width: 100%;
    max-height: 86%;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(16px + var(--m2-safe-b, 0px));
  }
}
html[class*="active-theme-"] .m2-ask-head { display: flex; align-items: center; gap: 10px; }
html[class*="active-theme-"] .m2-ask-head h2 {
  margin: 0; flex: 1;
  font: 600 19px/1.2 var(--m2-font-display);
}
html[class*="active-theme-"] .m2-ask-x {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--m2-border); background: var(--m2-card);
  color: var(--m2-text); font: 600 20px/1 var(--m2-font); cursor: pointer;
}
html[class*="active-theme-"] .m2-ask-out {
  position: relative;
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 16px;
  color: var(--m2-text); font: 400 15px/1.5 var(--m2-font);
}
html[class*="active-theme-"] .m2-ask-out:empty { display: none; }
html[class*="active-theme-"] .m2-ask-turn {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  flex: 0 0 auto; width: 100%;
}
html[class*="active-theme-"] .m2-ask-q {
  align-self: flex-end; max-width: 88%; margin: 0;
  padding: 8px 12px; border-radius: 14px;
  background: var(--m2-light); color: var(--m2-dark);
}
html[class*="active-theme-"] .m2-ask-a { margin: 0; white-space: pre-wrap; }
html[class*="active-theme-"] .m2-ask-pad { flex: 0 0 auto; pointer-events: none; }
html[class*="active-theme-"] .m2-ask-form { display: flex; gap: 8px; align-items: flex-end; }
html[class*="active-theme-"] .m2-ask-form textarea {
  flex: 1; min-height: 44px; max-height: 120px; box-sizing: border-box;
  border: 1px solid var(--m2-border); border-radius: 14px;
  background: var(--m2-card); color: var(--m2-text);
  font: 400 15px/1.4 var(--m2-font); padding: 10px 12px; resize: none;
}
html[class*="active-theme-"] .m2-ask-form button {
  height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--m2-grad); color: var(--m2-ink); font: 700 14px/1 var(--m2-font);
}
html[class*="active-theme-"] .m2-sheet-item .m2h-ico { width: 32px; height: 32px; }
html[class*="active-theme-"] .m2-ai-spark:hover,
html[class*="active-theme-"] .m2-ai-slot.is-open .m2-ai-spark { background: var(--m2-hover); }
html[class*="active-theme-"] .m2-ai-spark.is-busy { opacity: .45; cursor: progress; }
html[class*="active-theme-"] .m2-ai-spark.m2-ai-sort::after { display: none; }
html[class*="active-theme-"] .m2-ai-spark.m2-ai-sort.is-on {
  background: var(--m2-selected);
  color: var(--m2-dark);
}
html[data-m2-imp="1"] .mail-list-area-near-viewer .ReactVirtualized__Grid__innerScrollContainer > div {
  transition: top .32s ease;
}
html[class*="active-theme-"] .mail-list-area-near-viewer.m2-imp-on .bordered-separator-line {
  display: none;
}
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-imp-lead {
  background: color-mix(in srgb, var(--m2-primary) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--m2-primary);
}
html[dir="rtl"][class*="active-theme-"] .mail-list-area-near-viewer md-list-item.m2-imp-lead {
  box-shadow: inset -3px 0 0 var(--m2-primary);
}
html[class*="active-theme-"] .m2-ai-spark { position: relative; }
@keyframes m2-ai-sheen {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}
@keyframes m2-ai-glint {
  0%, 100% { opacity: 0; transform: scale(.4); }
  42% { opacity: 1; transform: scale(1); }
  68% { opacity: 0; transform: scale(.3); }
}
@keyframes m2-ai-sweep {
  0%, 58% { transform: translateX(-55%); }
  100% { transform: translateX(55%); }
}
html[class*="active-theme-"] .m2-ai-glyph {
  background-image: var(--m2-grad);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: m2-ai-sheen 2.8s ease-in-out infinite;
}
html[class*="active-theme-"] .m2-ai-spark::after {
  content: "";
  position: absolute;
  top: 4px;
  inset-inline-end: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--m2-card);
  box-shadow: 0 0 0 1px var(--m2-primary), 0 0 6px var(--m2-primary);
  pointer-events: none;
  animation: m2-ai-glint 2.8s ease-in-out infinite;
}
html[class*="active-theme-"] .m2-ai-shine { position: relative; overflow: hidden; }
html[class*="active-theme-"] .m2-ai-shine::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 36%, color-mix(in srgb, var(--m2-primary) 70%, transparent) 50%, transparent 64%);
  pointer-events: none;
  animation: m2-ai-sweep 3.4s ease-in-out infinite;
}

/* Compose: same box, margin, and alignment as the format buttons beside it. */
html[class*="active-theme-"] .ql-toolbar .m2-ai-slot {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 32px;
  margin: 3px !important;
  padding: 0 !important;
  line-height: 0;
  float: none;
}
html[class*="active-theme-"] .ql-toolbar .m2-ai-spark {
  width: 40px;
  height: 32px;
  margin: 0;
  border-radius: 8px;
}
html[class*="active-theme-"] .ql-toolbar .m2-ai-spark .material-icons { font-size: 20px; }
html[class*="active-theme-"] .m2-ai-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  display: none;
  min-width: 220px;
  padding: 6px;
  border-radius: 16px;
  background: var(--m2-card);
  box-shadow: 0 12px 28px rgba(5, 20, 31, .16), 0 2px 6px rgba(5, 20, 31, .06);
}
html[class*="active-theme-"] .m2-ai-slot.is-open .m2-ai-menu { display: block; }
html[class*="active-theme-"] .m2-ai-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 4px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--m2-text);
  font: 500 14px/1 var(--m2-font);
  text-align: start;
  cursor: pointer;
}
html[class*="active-theme-"] .m2-ai-menu button:hover,
html[class*="active-theme-"] .m2-ai-menu button.is-on { background: var(--m2-selected); }
html[class*="active-theme-"] .m2-ai-menu .material-icons {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--m2-primary) 16%, transparent);
  color: var(--m2-dark);
  font-size: 18px;
}
html[class*="active-theme-"] .m2-ai-status:not(:has(.m2-ai-note:not(:empty))) { display: none; }
html[class*="active-theme-"] .m2-ai-status { padding: 0 12px 8px; }

/* Open message: the summary card appears only after Summarize. Reply chips can show on their own. */
html[class*="active-theme-"] .m2-ai-mail:not(:has(.m2-ai-note)):not(:has(.m2-ai-out:not(:empty))):not(:has(.m2-ai-chip)) { display: none; }
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item h4.lighter { min-width: 0; }
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item h4.lighter .m2-ai-line {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--m2-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
html[class*="active-theme-"] .mail-list-area-near-viewer md-list-item h4.lighter:has(.m2-ai-line) > span:not(.m2-ai-line) { display: none; }
html[class*="active-theme-"] .m2-ai-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
html[class*="active-theme-"] .m2-ai-replies-label {
  flex: 1 1 100%;
  color: var(--m2-muted);
  font: 600 12px/16px var(--m2-font);
}
html[class*="active-theme-"] .m2-ai-chip {
  max-width: 100%;
  border: 1px solid var(--m2-border);
  border-radius: 999px;
  background: var(--m2-card);
  color: var(--m2-text);
  padding: 8px 14px;
  font: 600 13px/18px var(--m2-font);
  text-align: start;
  cursor: pointer;
}
html[class*="active-theme-"] .m2-ai-chip:hover { background: var(--m2-hover); }
html[class*="active-theme-"] .m2-ai-copy {
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--m2-dark);
  font: 700 12px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-ai-mail:not(:has(.m2-ai-out:not(:empty))) .m2-ai-copy { display: none; }

/* The brief tile matches the other dashboard icons. The sweep is the only difference. */
.m2h-brief {
  background: linear-gradient(180deg, color-mix(in srgb, var(--m2-primary) 14%, var(--m2-card)), var(--m2-card) 62%);
}
.m2-ai-brief { padding: 0 18px 16px; }
.m2h-brief .m2h-link { cursor: pointer; }
.m2-ai-brief-lead { margin: 0 0 10px; color: var(--m2-muted); font-size: 13.5px; line-height: 20px; }
html[class*="active-theme-"] .m2-ai-brief .m2-ai-out {
  margin-top: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
html[class*="active-theme-"] .m2-ai-disc {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--m2-grad);
  color: var(--m2-ink);
}
html[class*="active-theme-"] .m2-ai-disc .material-icons { font-size: 16px; position: relative; z-index: 1; }
html[class*="active-theme-"] .mail-list-area-near-viewer .m2-mail-imp {
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--m2-grad);
  color: var(--m2-ink) !important;
  font-size: 11px;
  font-weight: 800 !important;
  line-height: 18px;
  letter-spacing: .02em;
  margin-inline-start: 6px;
}

/* Shield: explain-why button inside the verdict banner. */
html[class*="active-theme-"] .m2-shield-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
html[class*="active-theme-"] .m2-shield-line { flex: 1 1 auto; min-width: 0; }
html[class*="active-theme-"] .m2-ai-explain {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--m2-dark);
  font: 700 12.5px/1 var(--m2-font);
  cursor: pointer;
}
html[class*="active-theme-"] .m2-ai-explain:hover { text-decoration: underline; }
html[class*="active-theme-"] .m2-ai-explain .material-icons { font-size: 15px; }
html[class*="active-theme-"] .m2-shield-banner .m2-ai-out {
  flex: 1 1 100%;
  margin-top: 4px;
  box-sizing: border-box;
}

/* VOX summarize shares the AI accent so it reads as the same feature. */
.m2-vox-ai { border-color: transparent; background: color-mix(in srgb, var(--m2-primary) 14%, var(--m2-card)); color: var(--m2-dark); }
.m2-vox-ai svg { color: var(--m2-primary); }
.m2-vox-ai:hover { background: color-mix(in srgb, var(--m2-primary) 22%, var(--m2-card)); }