/* Bottom toolbar: a colour per tool, hover wobble + glow, bubbles (dock-fx.js). */
.x-dock { transition:none; }
.x-dock>button:nth-of-type(1) { --tone:#ff7b6b; }
.x-dock>button:nth-of-type(2) { --tone:#ffc24d; }
.x-dock>button:nth-of-type(3) { --tone:#8be36b; }
.x-dock>button:nth-of-type(4) { --tone:#4fd6f5; }
.x-dock>button:nth-of-type(5) { --tone:#b48cff; }
.x-dock>button:nth-of-type(6) { --tone:#ff7fca; }
.x-dock>button { position:relative; color:color-mix(in srgb,var(--tone) 55%,#c7dde0); transition:color .2s,background .25s,transform .25s cubic-bezier(.3,1.6,.5,1); }
.x-dock>button>span { color:var(--tone); filter:drop-shadow(0 0 0 transparent); transition:filter .25s; }
.x-dock>button:before { content:""; position:absolute; inset:4px; border-radius:12px; background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--tone) 34%,transparent),transparent 70%); opacity:0; transform:scale(.6); transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events:none; }
.x-dock>button:hover,.x-dock>button:focus-visible { color:var(--tone); transform:translateY(-3px); }
.x-dock>button:hover:before,.x-dock>button:focus-visible:before { opacity:1; transform:scale(1); }
.x-dock>button:hover>span,.x-dock>button:focus-visible>span { animation:dock-wobble .7s cubic-bezier(.3,1.5,.5,1); filter:drop-shadow(0 0 8px var(--tone)); }
.x-dock>button:active { transform:translateY(0) scale(.92); transition-duration:.08s; }
.x-dock>button.active { color:var(--tone); background:color-mix(in srgb,var(--tone) 16%,transparent); }
.x-dock>button.active:after { content:""; position:absolute; bottom:3px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--tone); box-shadow:0 0 8px var(--tone); }
.x-create { transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s; }
.x-create:hover { transform:translateY(-3px) rotate(90deg) scale(1.06); box-shadow:0 6px 30px #53dcdfaa; }
.x-create:active { transform:scale(.9); }
@keyframes dock-wobble { 0% { transform:scale(1); } 30% { transform:scale(1.32) rotate(-9deg); } 55% { transform:scale(.92) rotate(6deg); } 75% { transform:scale(1.1) rotate(-3deg); } 100% { transform:scale(1.12); } }

.dock-bubbles { position:fixed; inset:0; z-index:40; overflow:hidden; pointer-events:none; }
.dock-bubble { position:absolute; left:0; top:0; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--tone) 80%,#fff); background:radial-gradient(circle at 32% 28%,#ffffffd0 0 12%,color-mix(in srgb,var(--tone) 30%,transparent) 40%,transparent 72%); box-shadow:0 0 10px color-mix(in srgb,var(--tone) 45%,transparent),inset 0 0 6px color-mix(in srgb,var(--tone) 50%,transparent); will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce) { .x-dock>button:hover>span { animation:none; } .dock-bubbles { display:none; } }