:root {
  --sws-glass-surface: var(--sws-surface);
  --sws-glass-surface-strong: var(--sws-surface-strong);
  --sws-glass-line: var(--sws-line);
  --sws-glass-highlight: rgba(255, 255, 255, 0.055);
  --sws-glass-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
}

.workspace {
  isolation: isolate;
}

.canvas {
  isolation: isolate;
  background-color: #020305;
  background-image: none;
}

.canvas > .board {
  z-index: 2;
}

.sws-water-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.88;
  mix-blend-mode: screen;
  contain: strict;
}

.leftbar,
.panel,
.bottom-input,
.mini-panel,
.minimap,
.context-menu,
.add-menu,
.mention-menu {
  border-color: var(--sws-glass-line);
  background-color: var(--sws-glass-surface);
  background-image: linear-gradient(145deg, var(--sws-glass-highlight), transparent 48%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--sws-glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
}

.bottom-input {
  background-color: var(--sws-glass-surface-strong);
}

.minimap {
  background-color: rgba(8, 10, 14, 0.68);
}

.mini-view {
  border-color: rgba(211, 230, 255, 0.68);
  background: rgba(110, 168, 255, 0.055);
  box-shadow: 0 0 12px rgba(110, 168, 255, 0.08);
}

@media (prefers-reduced-motion: reduce), (pointer: coarse), (hover: none) {
  .sws-water-surface {
    display: none;
  }

}

@media (max-width: 900px) {
  .leftbar,
  .panel,
  .bottom-input,
  .mini-panel,
  .context-menu,
  .add-menu,
  .mention-menu {
    -webkit-backdrop-filter: blur(9px) saturate(108%);
    backdrop-filter: blur(9px) saturate(108%);
  }
}