#settings-drawer { position: fixed; inset: 0; z-index: 21; pointer-events: none; }
#settings-drawer button {
  width: var(--dock-size); height: var(--dock-size); min-height: var(--dock-size); flex: 0 0 var(--dock-size); padding: 0;
  position: relative; display: grid; place-items: center; border-radius: 50%; pointer-events: auto;
  overflow: hidden; isolation: isolate; clip-path: circle(50%);
  color: var(--dock-ink); border: 1.5px solid var(--dock-rim);
  background: transparent;
  box-shadow: var(--dock-shadow);
}
/* Keep the frosted surface separate from generated alpha-mask artwork. */
#settings-drawer button::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  transition: background .15s ease; background: var(--button-fill, var(--dock-fill)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#settings-launch { position: absolute; }
#settings-drawer-items { position: absolute; display: flex; flex-direction: column; gap: var(--dock-gap); padding: 4px; width: calc(var(--dock-size) + 8px); overflow: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: none; }
#settings-drawer-items::-webkit-scrollbar { display: none; }
#settings-drawer button svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#settings-drawer button:hover, #settings-drawer button:focus-visible { --button-fill: rgba(218,232,199,.72); transform: none; }
#settings-drawer button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #244331, var(--dock-shadow); }
#settings-drawer button[aria-pressed="true"]:where(:not([data-setting="sound"])) { --button-fill: rgba(53,84,62,.86); color: #f4f8f3; }
#settings-drawer button:disabled { opacity: .4; cursor: not-allowed; }
#settings-drawer-items button { animation: drawer-unfold .18s ease-out both; animation-delay: calc(var(--drawer-index) * 22ms); }
#settings-drawer[data-direction="up"] { --drawer-start: 16px; }
@keyframes drawer-unfold { from { opacity: 0; transform: translateY(var(--drawer-start, -16px)); } to { opacity: 1; transform: translateY(0); } }
body:has(dialog[open]) #settings-drawer, body:has(#action-menu:not([hidden])) #settings-drawer, body.photo-mode #settings-drawer { visibility: hidden; }
.mini-mode #settings-drawer[data-open="false"] { visibility: hidden; }
#menu-position-buttons { display: grid; grid-template-columns: repeat(4, 48px); gap: 12px; margin: 20px 0; }
#menu-position-buttons button { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; }
#menu-position-buttons button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.reduce-motion #settings-drawer button, body.reduce-motion #settings-drawer button::before { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { #settings-drawer button, #settings-drawer button::before { animation: none; transition: none; } }
@media (prefers-reduced-transparency: reduce) { #settings-drawer button::before { background: #e2eddf; backdrop-filter: none; -webkit-backdrop-filter: none; } #settings-drawer button[aria-pressed="true"]:where(:not([data-setting="sound"]))::before { background: #35543e; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #settings-drawer button::before { background: #e2eddf; } #settings-drawer button[aria-pressed="true"]:where(:not([data-setting="sound"]))::before { background: #35543e; } }
@media (forced-colors: active) { #settings-drawer button::before { display: none; } #settings-drawer button { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; } #settings-drawer button[aria-pressed="true"] { background: Highlight; color: HighlightText; } }
@media (forced-colors: active) { #settings-drawer button:focus-visible { border-color: Highlight; } }

#settings-drawer button svg[data-grid="24"] { stroke-width: 1.3; }