/* Dock buttons and legacy theme tokens used by other canvas controls.
   Workspace pages have dedicated owners in workspace-*.css, tasks.css and workflows.css. */

:root {
  --sw-dock-panel-base: #f4fbff;
  --sw-dock-panel-base-strong: #eaf7fc;
  --sw-dock-panel-rail-base: #e5f5fb;
  --sw-dock-field-base: #f8fdff;
  --sw-dock-field-strong-base: #eef9fd;
  --sw-dock-canvas-cover: #f1faff;
  --sw-dock-panel:
    radial-gradient(circle at 12% -8%, rgba(35, 169, 207, 0.18), transparent 38%),
    radial-gradient(circle at 102% 0%, rgba(99, 102, 241, 0.08), transparent 34%),
    linear-gradient(180deg, #fbfeff, #e7f8fd);
  --sw-dock-panel-deep:
    radial-gradient(circle at 18% -6%, rgba(45, 212, 239, 0.2), transparent 42%),
    linear-gradient(180deg, #f6fdff, #dcf3fb);
  --sw-dock-panel-rail:
    linear-gradient(180deg, #ecfaff, #dff3fb);
  --sw-dock-field:
    linear-gradient(180deg, #ffffff, #eef9fd);
  --sw-dock-field-solid: #f8fdff;
  --sw-dock-field-strong:
    linear-gradient(180deg, #ffffff, #e7f7fc);
  --sw-dock-content:
    linear-gradient(180deg, #fbfeff, #edf9fd);
  --sw-dock-field-hover:
    radial-gradient(circle at 20% 0%, rgba(34, 164, 205, 0.13), transparent 42%),
    linear-gradient(180deg, #ffffff, #e5f7fd);
  --sw-dock-text: var(--sw-workbench-text, #031827);
  --sw-dock-muted: var(--sw-workbench-muted, rgba(8, 37, 58, 0.9));
  --sw-dock-faint: var(--sw-workbench-faint, rgba(8, 37, 58, 0.78));
  --sw-dock-accent: var(--sw-workbench-accent, #0ea5c6);
  --sw-dock-accent-soft: var(--sw-workbench-accent-soft, rgba(14, 165, 198, 0.16));
  --sw-dock-line: var(--sw-workbench-line, rgba(28, 128, 165, 0.21));
  --sw-dock-line-strong: var(--sw-workbench-line-strong, rgba(15, 154, 190, 0.36));
  --sw-dock-line-soft: rgba(28, 128, 165, 0.13);
  --sw-dock-highlight: var(--sw-workbench-highlight, rgba(255, 255, 255, 0.86));
  --sw-dock-positive: var(--sw-workbench-positive, #0f9f87);
  --sw-dock-warning: var(--sw-workbench-warning, #c18414);
  --sw-dock-danger: var(--sw-workbench-danger, #d85252);
  --sw-dock-chip:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(239, 250, 254, 0.62));
  --sw-dock-card:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--sw-dock-accent) 7%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(238, 249, 253, 0.76));
  --sw-dock-card-hover:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--sw-dock-accent) 12%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 247, 253, 0.84));
  --sw-dock-inset:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sw-dock-accent) 7%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(248, 253, 255, 0.84), rgba(231, 246, 252, 0.68));
  --sw-dock-shadow:
    0 34px 92px rgba(31, 85, 116, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    inset 0 1px 0 var(--sw-dock-highlight);
  --sw-dock-primary:
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.45), transparent 40%),
    linear-gradient(135deg, #17a9c9, #556ee9);
}

html.theme-dark,
body.theme-dark,
[data-theme="dark"] {
  --sw-dock-panel-base: #07182c;
  --sw-dock-panel-base-strong: #0a2238;
  --sw-dock-panel-rail-base: #0a2137;
  --sw-dock-field-base: #0d2a42;
  --sw-dock-field-strong-base: #123750;
  --sw-dock-canvas-cover: #081d31;
  --sw-dock-panel:
    radial-gradient(circle at 12% -10%, rgba(45, 212, 239, 0.14), transparent 40%),
    radial-gradient(circle at 98% 0%, rgba(99, 102, 241, 0.12), transparent 35%),
    linear-gradient(180deg, #09203a, #061426);
  --sw-dock-panel-deep:
    radial-gradient(circle at 18% -4%, rgba(45, 212, 239, 0.16), transparent 42%),
    linear-gradient(180deg, #0b2946, #07182d);
  --sw-dock-panel-rail:
    linear-gradient(180deg, #0d2c49, #081b31);
  --sw-dock-field:
    linear-gradient(180deg, #12334e, #0b253d);
  --sw-dock-field-solid: #0d2a42;
  --sw-dock-field-strong:
    linear-gradient(180deg, #183e5b, #0d2a43);
  --sw-dock-content:
    linear-gradient(180deg, #0d2945, #08182d);
  --sw-dock-field-hover:
    radial-gradient(circle at 20% 0%, rgba(45, 212, 239, 0.15), transparent 42%),
    linear-gradient(180deg, #173c58, #0d2c45);
  --sw-dock-line-soft: rgba(125, 211, 252, 0.1);
  --sw-dock-chip:
    linear-gradient(180deg, rgba(24, 61, 88, 0.82), rgba(11, 37, 61, 0.72));
  --sw-dock-card:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--sw-dock-accent) 10%, transparent), transparent 44%),
    linear-gradient(180deg, rgba(18, 51, 78, 0.88), rgba(9, 31, 52, 0.8));
  --sw-dock-card-hover:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--sw-dock-accent) 16%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(25, 68, 99, 0.92), rgba(12, 42, 68, 0.86));
  --sw-dock-inset:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sw-dock-accent) 9%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(12, 39, 64, 0.86), rgba(8, 28, 48, 0.72));
  --sw-dock-shadow:
    0 36px 98px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(125, 211, 252, 0.08) inset,
    inset 0 1px 0 var(--sw-dock-highlight);
  --sw-dock-primary:
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.2), transparent 40%),
    linear-gradient(135deg, #16bddc, #5b6df1);
}

/* Floating surface state contract.
   Closed dock/account/update surfaces must not keep intercepting the canvas. */
#v2-wrap .sidebar-floating {
  overflow: visible !important;
  opacity: 1 !important;
}

#v2-wrap .sidebar-floating .avatar-wrap {
  position: relative !important;
  z-index: 2 !important;
}

/* Dock icon state contract: every bottom-dock entry owns normal/open icons. */
#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain) :is(.ico-normal, .ico-hover) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain) .ico-normal {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain) .ico-hover {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.84) rotate(-8deg) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(.active, [aria-expanded="true"]) .ico-normal {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.84) rotate(8deg) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(.active, [aria-expanded="true"]) .ico-hover {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):hover:not(.active):not([aria-expanded="true"]) .ico-normal {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):hover:not(.active):not([aria-expanded="true"]) .ico-hover {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.84) rotate(-8deg) !important;
}

/* Bottom dock action contract.
   Keep every dock entry on the same box model and interaction language. The
   ID selectors intentionally outrank older theme-specific dock passes. */
:root #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn,
:root #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn,
:root #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3,
:root #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3,
:root #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3,
:root #v2-wrap .sidebar-floating button#userAvatar.user-account-plain,
:root #v2-wrap .sidebar-floating button.user-gear-plain,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#userAvatar.user-account-plain,
html.theme-light body.theme-light #v2-wrap .sidebar-floating button.user-gear-plain,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button#userAvatar.user-account-plain,
html.theme-light body:not(.theme-dark) #v2-wrap .sidebar-floating button.user-gear-plain,
[data-theme="light"] body #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn,
[data-theme="light"] body #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn,
[data-theme="light"] body #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3,
[data-theme="light"] body #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3,
[data-theme="light"] body #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3,
[data-theme="light"] body #v2-wrap .sidebar-floating button#userAvatar.user-account-plain,
[data-theme="light"] body #v2-wrap .sidebar-floating button.user-gear-plain {
  appearance: none !important;
  display: flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(3, 24, 39, 0.9) !important;
  box-shadow: none !important;
}

:root #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, .active, [aria-expanded="true"]),
:root #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn:is(:hover, .active, [aria-expanded="true"]),
:root #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
:root #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
:root #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
:root #v2-wrap .sidebar-floating button#userAvatar.user-account-plain:is(:hover, .active, [aria-expanded="true"]),
:root #v2-wrap .sidebar-floating button.user-gear-plain:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button#userAvatar.user-account-plain:is(:hover, .active, [aria-expanded="true"]),
html.theme-light body.theme-light #v2-wrap .sidebar-floating button.user-gear-plain:is(:hover, .active, [aria-expanded="true"]) {
  border-style: solid !important;
  border-color: transparent !important;
  background: rgba(15, 23, 42, 0.07) !important;
  color: rgba(15, 23, 42, 0.78) !important;
  box-shadow: none !important;
  transform: translateY(-4px) !important;
}

html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn,
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn,
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3,
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3,
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3,
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#userAvatar.user-account-plain,
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button.user-gear-plain,
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn,
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn,
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3,
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3,
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3,
[data-theme="dark"] body #v2-wrap .sidebar-floating button#userAvatar.user-account-plain,
[data-theme="dark"] body #v2-wrap .sidebar-floating button.user-gear-plain {
  appearance: none !important;
  display: flex !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--sw-workbench-muted) !important;
  box-shadow: none !important;
}

html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, .active, [aria-expanded="true"]),
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn:is(:hover, .active, [aria-expanded="true"]),
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button#userAvatar.user-account-plain:is(:hover, .active, [aria-expanded="true"]),
html.theme-dark body.theme-dark #v2-wrap .sidebar-floating button.user-gear-plain:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnCanvasLogo.sidebar-btn-v3.sidebar-canvas-btn:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnProjectLibrary.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnWorkflows.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button#btnTasks.sidebar-btn-v3:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button#userAvatar.user-account-plain:is(:hover, .active, [aria-expanded="true"]),
[data-theme="dark"] body #v2-wrap .sidebar-floating button.user-gear-plain:is(:hover, .active, [aria-expanded="true"]) {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: transparent !important;
  background: rgba(45, 212, 239, 0.11) !important;
  color: var(--sw-workbench-text) !important;
  box-shadow: none !important;
  transform: translateY(-4px) !important;
}

body > #update-banner:not(.open),
body > #update-banner-backdrop:not(.open) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body > #update-banner.open,
body > #update-banner-backdrop.open {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Bottom toolbar scheme 2: compact icon row with per-control labels.
   This is the final owner for bottom canvas chrome. */
#v2-wrap {
  --sw-dock2-text: rgba(3, 24, 39, 0.96);
  --sw-dock2-muted: rgba(10, 35, 52, 0.9);
  --sw-dock2-line: rgba(31, 125, 155, 0.16);
  --sw-dock2-line-strong: rgba(31, 125, 155, 0.3);
  --sw-dock2-hover: rgba(6, 44, 67, 0.07);
  --sw-dock2-label-bg: rgba(255, 255, 255, 0.9);
  --sw-dock2-label-shadow: 0 10px 24px rgba(43, 79, 108, 0.12);
  --sw-dock2-accent: var(--sw-workbench-accent, #1f7d9b);
}

html.theme-dark #v2-wrap,
body.theme-dark #v2-wrap,
[data-theme="dark"] #v2-wrap {
  --sw-dock2-text: rgba(250, 253, 255, 0.99);
  --sw-dock2-muted: rgba(226, 242, 250, 0.91);
  --sw-dock2-line: rgba(125, 211, 252, 0.16);
  --sw-dock2-line-strong: rgba(125, 211, 252, 0.28);
  --sw-dock2-hover: rgba(45, 212, 239, 0.1);
  --sw-dock2-label-bg: rgba(8, 18, 34, 0.9);
  --sw-dock2-label-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

#v2-wrap .sidebar-floating {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 18px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 340px) !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

html body #v2-wrap .sidebar-floating.sidebar-floating,
html body #v2-wrap .canvas-controls-floating.canvas-controls-floating {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#v2-wrap .sidebar-floating::before {
  content: none !important;
  display: none !important;
}

#v2-wrap .sidebar-floating::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -7px !important;
  width: min(270px, 74%) !important;
  height: 1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(24, 80, 112, 0.16), transparent) !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

#v2-wrap .sidebar-floating:is(:hover, :focus-within),
#v2-wrap .sidebar-floating:has(> button:is(.active, [aria-expanded="true"])),
#v2-wrap .sidebar-floating:has(> .sidebar-logo-wrap > button:is(.active, [aria-expanded="true"])),
#v2-wrap .sidebar-floating:has(> .avatar-wrap > button:is(.active, [aria-expanded="true"])) {
  gap: 8px !important;
}

#v2-wrap .sidebar-floating .sidebar-flex-spacer {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
}

#v2-wrap .sidebar-floating .sidebar-logo-wrap,
#v2-wrap .sidebar-floating .avatar-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  overflow: visible !important;
  margin: 0 !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain),
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn {
  appearance: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--sw-dock2-muted) !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain)::before,
#v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry::before,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn::before {
  content: none !important;
  display: none !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain) > .dock-control-label,
#v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry > .dock-control-label,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn > .dock-control-label {
  box-sizing: border-box !important;
  display: inline-flex !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 50px !important;
  max-width: 96px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid var(--sw-dock2-line) !important;
  border-radius: 8px !important;
  background: var(--sw-dock2-label-bg) !important;
  color: var(--sw-dock2-muted) !important;
  box-shadow: var(--sw-dock2-label-shadow) !important;
  font-size: 12.5px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  overflow: visible !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(4px) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease,
    color 0.16s ease,
    background 0.16s ease !important;
  z-index: 3 !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
#v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(-1px) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(:hover, :focus-visible, .active, [aria-expanded="true"]),
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, :focus-visible, .active, [aria-expanded="true"]) {
  border-color: transparent !important;
  background: var(--sw-dock2-hover) !important;
  color: var(--sw-dock2-text) !important;
  box-shadow: none !important;
  transform: translateY(-4px) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
#v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label {
  color: var(--sw-dock2-text) !important;
  border-color: var(--sw-dock2-line-strong) !important;
  background: var(--sw-dock2-label-bg) !important;
}

html.theme-dark #v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
body.theme-dark #v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
html.theme-dark #v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
body.theme-dark #v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
[data-theme="dark"] #v2-wrap .sidebar-floating #workspacePointsEntry.workspace-points-entry:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label,
[data-theme="dark"] #v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(:hover, :focus-visible, .active, [aria-expanded="true"]) > .dock-control-label {
  background: var(--sw-dock2-label-bg) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain)::after,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -4px !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sw-dock2-accent) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sw-dock2-accent) 54%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(-50%) scale(0.72) !important;
  pointer-events: none !important;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain):is(.active, [aria-expanded="true"])::after,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn:is(.active, [aria-expanded="true"])::after {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) !important;
}

#v2-wrap .sidebar-floating :is(button.sidebar-btn-v3, button.user-account-plain, button.user-gear-plain) svg,
#v2-wrap .sidebar-floating button#btnAdd.sidebar-btn-v3.dock-create-btn svg {
  width: 19px !important;
  height: 19px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

#v2-wrap .sidebar-floating button#userAvatar.user-account-plain svg {
  width: 20px !important;
  height: 20px !important;
}

#v2-wrap .sidebar-floating .sidebar-sep-v3,
#v2-wrap .canvas-controls-floating .cc-divider {
  width: 1px !important;
  height: 22px !important;
  margin: 0 1px !important;
  border: 0 !important;
  background: linear-gradient(180deg, transparent, rgba(48, 88, 110, 0.22), transparent) !important;
  opacity: 1 !important;
}

#v2-wrap .canvas-controls-floating {
  position: fixed !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 18px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  gap: 9px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#v2-wrap .canvas-controls-floating::before,
#v2-wrap .canvas-controls-floating::after {
  content: none !important;
  display: none !important;
}

#v2-wrap .canvas-controls-floating .cc-btn {
  appearance: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--sw-dock2-muted) !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease !important;
}

#v2-wrap .canvas-controls-floating .cc-btn::before {
  content: attr(aria-label) !important;
  display: inline-flex !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 54px !important;
  max-width: 140px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(6, 44, 67, 0.05) !important;
  color: var(--sw-dock2-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(4px) !important;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease !important;
  z-index: 3 !important;
}

#v2-wrap .canvas-controls-floating .cc-btn:is(:hover, :focus-visible, .active) {
  background: var(--sw-dock2-hover) !important;
  color: var(--sw-dock2-text) !important;
  transform: translateY(-4px) !important;
}

#v2-wrap .canvas-controls-floating .cc-btn:is(:hover, :focus-visible, .active)::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(-1px) !important;
}

#v2-wrap .canvas-controls-floating .cc-btn:first-of-type::before {
  left: 0 !important;
  transform: translateY(4px) !important;
}

#v2-wrap .canvas-controls-floating .cc-btn:first-of-type:is(:hover, :focus-visible, .active)::before {
  transform: translateY(-1px) !important;
}

#v2-wrap .canvas-controls-floating .cc-btn svg {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

#v2-wrap .canvas-controls-floating .zoom-controls {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 142px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 2px !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sw-dock2-text) !important;
  box-shadow: none !important;
}

#v2-wrap .canvas-controls-floating .zoom-slider {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 96px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  accent-color: var(--sw-dock2-accent) !important;
}

#v2-wrap .canvas-controls-floating .zoom-slider::-webkit-slider-runnable-track {
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(74, 88, 112, 0.22) !important;
  box-shadow: none !important;
}

#v2-wrap .canvas-controls-floating .zoom-slider::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sw-dock2-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-dock2-accent) 12%, transparent) !important;
}

#v2-wrap .canvas-controls-floating .zoom-slider::-moz-range-track {
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(74, 88, 112, 0.22) !important;
  box-shadow: none !important;
}

#v2-wrap .canvas-controls-floating .zoom-slider::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sw-dock2-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-dock2-accent) 12%, transparent) !important;
}

#v2-wrap .canvas-controls-floating .zoom-percent {
  min-width: 38px !important;
  color: var(--sw-dock2-text) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
}

html.theme-dark #v2-wrap .canvas-controls-floating .cc-btn::before,
body.theme-dark #v2-wrap .canvas-controls-floating .cc-btn::before,
[data-theme="dark"] #v2-wrap .canvas-controls-floating .cc-btn::before {
  background: rgba(45, 212, 239, 0.08) !important;
}

html:has(#v2-wrap .sidebar-floating:is(:hover, :focus-within)) body > .global-tooltip,
html:has(#v2-wrap .canvas-controls-floating .cc-btn:is(:hover, :focus-visible)) body > .global-tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}