/* One continuous material with continuously sampled, color-driven edge refraction. */
@media (max-width: 767px) {
  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
  }

  .crm-liquid-glass-surface {
    position: fixed;
    z-index: 54;
    inset: 0 0 auto;
    height: var(--crm-glass-height, 73px);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background: rgba(13, 13, 19, 0.54);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--crm-glass-header-bottom, 73px), 100% calc(var(--crm-glass-height, 73px) - var(--crm-glass-toolbar-top, 73px));
    mask-size: 100% var(--crm-glass-header-bottom, 73px), 100% calc(var(--crm-glass-height, 73px) - var(--crm-glass-toolbar-top, 73px));
    -webkit-mask-position: 0 0, 0 var(--crm-glass-toolbar-top, 73px);
    mask-position: 0 0, 0 var(--crm-glass-toolbar-top, 73px);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4:first-child {
    display: contents !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4:first-child > div:first-child {
    margin-bottom: 0.5rem !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4:first-child > div:nth-child(2) {
    position: sticky !important;
    top: var(--crm-mobile-app-header-height, 73px) !important;
    z-index: 55 !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: visible !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .mobile-dashboard-shell:has(.mobile-crm-shell) .mobile-crm-shell > div.flex.gap-4:first-child > div:nth-child(2)::before {
    display: none !important;
    content: none !important;
  }
}

/* Floating controls use the same real-content refraction as the mobile CRM header. */
.mobile-bottom-nav.crm-liquid-glass-nav {
  isolation: isolate;
  overflow: visible;
  background-color: rgba(24, 23, 32, 0.58) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 42%, rgba(119, 93, 255, 0.035)) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.42), 0 2px 10px rgba(0, 0, 0, 0.24), inset 0 0 0 0.5px rgba(255, 255, 255, 0.035) !important;
  -webkit-backdrop-filter: blur(25px) saturate(185%) contrast(1.04) !important;
  backdrop-filter: blur(25px) saturate(185%) contrast(1.04) !important;
}

.crm-liquid-glass-target {
  isolation: isolate;
  -webkit-backdrop-filter: blur(25px) saturate(180%) contrast(1.035) !important;
  backdrop-filter: blur(25px) saturate(180%) contrast(1.035) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.44), 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.025) !important;
}

.crm-liquid-glass-popup,
.crm-liquid-glass-menu {
  background-color: rgba(27, 26, 35, 0.76) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.065), transparent 48%, rgba(117, 89, 255, 0.035)) !important;
}

.crm-liquid-glass-sheet {
  background-color: rgba(28, 27, 36, 0.78) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 42%, rgba(102, 82, 255, 0.04)) !important;
}

.crm-liquid-glass-optics {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.crm-liquid-glass-rim {
  position: absolute;
  left: 0;
  width: 100%;
  height: 26px;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  filter: blur(2.6px) saturate(165%);
}

.crm-liquid-glass-rim-bottom {
  bottom: 0;
  opacity: 0.58;
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.22) 66%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.22) 66%, #000 100%);
}

.crm-liquid-glass-rim-top {
  top: 0;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.22) 62%, transparent);
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.22) 62%, transparent);
}

.crm-liquid-glass-surface > .crm-liquid-glass-rim-bottom { opacity: 0.62; }
.crm-liquid-glass-sheet > .crm-liquid-glass-optics > .crm-liquid-glass-rim-top { opacity: 0.34; }
.crm-liquid-glass-sheet > .crm-liquid-glass-optics > .crm-liquid-glass-rim-bottom { opacity: 0.4; }

@media (max-width: 767px) {
  .mobile-bottom-nav.crm-liquid-glass-nav {
    -webkit-backdrop-filter: blur(27px) saturate(188%) contrast(1.04) !important;
    backdrop-filter: blur(27px) saturate(188%) contrast(1.04) !important;
  }
  .crm-liquid-glass-sheet { border-top-color: rgba(255, 255, 255, 0.17) !important; }
}

@media (min-width: 768px) {
  .crm-liquid-glass-surface { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-liquid-glass-rim, .crm-liquid-glass-optics { display: none !important; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .crm-liquid-glass-surface {
    background: rgba(13, 13, 19, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .crm-liquid-glass-nav,
  .crm-liquid-glass-target {
    background-color: rgba(17, 17, 24, 0.97) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .crm-liquid-glass-rim, .crm-liquid-glass-optics { display: none !important; }
}