/* Reuse the existing controls and drag surface; the dock reserves its measured
   height through syncPaintArea just as before. Colours stay natively swipeable. */
.pixel-studio #color-tray{--palette-side-width:240px;display:grid!important;grid-template-columns:minmax(0,1fr) var(--palette-side-width);grid-template-rows:44px 104px;overflow:visible!important}
.pixel-studio #color-tray[hidden]{display:none!important}
.pixel-studio[data-palette-docked=false] #color-tray{width:min(640px,calc(100vw - 32px))!important}
.pixel-studio #color-tray>.floating-panel-head{grid-column:1;grid-row:1;position:static!important;min-width:0;height:44px;min-height:44px;padding:0 6px!important;gap:2px;background:transparent}
.pixel-studio #color-tray #palette{grid-column:1;grid-row:2;align-self:start;min-width:0;--tile-height:52px;height:104px!important}
.pixel-studio #color-tray #palette .swatch b{font-size:25px}
.pixel-studio #color-tray .tray-heading{min-width:0;margin-left:10px!important;flex:1 1 auto}.pixel-studio #color-tray #selected-color{min-width:0;padding-right:30px;font:500 14px/1.35 system-ui}
.pixel-studio #color-tray :is(.peek-back,.palette-dock-toggle,.floating-panel-close,.floating-panel-handle){flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px;touch-action:manipulation}
.pixel-studio #color-tray .pixel-page-controls{grid-column:2;grid-row:1/3;position:static;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px 44px;gap:6px;align-items:stretch;justify-content:stretch;height:148px;min-height:148px;margin:0;padding:2px 10px;border-left:2px solid #c0cdb5;background:linear-gradient(135deg,#f6f9ed,#e4eddb);border-radius:0 10px 0 0;box-sizing:border-box}
.pixel-studio #color-tray .palette-brushes{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:6px;grid-row:1;width:100%;padding:0;margin:0;border:0;align-self:stretch}
.pixel-studio #color-tray .palette-brushes>button{width:100%;min-width:44px;min-height:44px;height:44px;flex:none;padding:5px 4px;font-size:12px;line-height:1.2;border:1px solid #b8cbb0;border-radius:10px;background:#fffef4;color:#405e39;box-shadow:0 2px 3px #3d633d0d,inset 0 1px #fff}
.pixel-studio #color-tray .palette-brushes>button>span{gap:4px}.pixel-studio #color-tray .palette-brushes>button>span>i{width:min(var(--brush-dot),9px);height:min(var(--brush-dot),9px)}
.pixel-studio #color-tray .palette-brushes>button[aria-pressed=true]{border-color:#64875e;background:#cfe2be;color:#365c35;box-shadow:inset 0 0 0 1px #f9ffed}
.pixel-studio #color-tray .paint-zoom-levels{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:6px;grid-row:2;padding:0;margin:0;border:0;border-radius:0;background:transparent;min-width:0}
.pixel-studio #color-tray .paint-zoom-levels button{width:100%;min-width:44px;height:44px;min-height:44px;padding:5px 2px;font-size:12px;border:1px solid #bccdb5;border-radius:10px;background:#fdfef6;color:#425f3c;box-shadow:inset 0 1px #fff}
.pixel-studio #color-tray .paint-zoom-levels [data-zoom-stage=overview]{font-size:0}.pixel-studio #color-tray .paint-zoom-levels [data-zoom-stage=overview]::after{content:'▣';font:22px/1 system-ui}
.pixel-studio #color-tray .paint-zoom-levels button[aria-pressed=true]{border-color:#477451;background:#548460;color:#fff9e9;box-shadow:none}
.pixel-studio #color-tray #tools-toggle{position:absolute!important;inset:auto 10px 2px auto!important;display:flex!important;gap:10px;justify-content:center;align-items:center;width:calc(var(--palette-side-width) - 22px);height:44px;min-height:44px;min-width:44px;padding:5px 10px!important;border:1px solid #91aa7e;border-radius:10px;background:linear-gradient(#faffeb,#e4efda);color:#345b31;box-shadow:0 2px 4px #4a6b3920;font:22px/1 system-ui;z-index:2}
.pixel-studio #color-tray #tools-toggle::after{content:'Optionen';font:750 13px/1.3 system-ui}
.pixel-studio #color-tray #tools-toggle[aria-expanded=true]{background:#cce0b9;border-color:#5c8051;box-shadow:inset 0 0 0 1px #f5ffe8}
.pixel-studio #color-tray .pixel-page-controls .pixel-hud{position:absolute;inset:14px calc(var(--palette-side-width) + 101px) auto auto;width:auto;height:18px;margin:0;gap:0;pointer-events:none}
.pixel-studio #color-tray .pixel-hud>i{display:none}.pixel-studio #color-tray .pixel-hud>b{font:750 11px/1.4 system-ui;color:#6d7d62}
.pixel-studio #color-tray:has(.magic-status:not([hidden])) .pixel-hud{display:none}
.pixel-studio #color-tray:has(.magic-status:not([hidden])) #selected-color{padding-right:0}
.pixel-studio #color-tray .palette-brushes .brush-reward-tooltip{left:auto;right:0;bottom:calc(100% + 12px);max-width:min(330px,calc(100vw - 34px))}
.pixel-studio #color-tray :is(button,a):focus-visible{outline:3px solid #40968d;outline-offset:-3px}
body.dark .pixel-studio #color-tray .pixel-page-controls{background:linear-gradient(135deg,#3b4548,#303d3d);border-left-color:#82977c}body.dark .pixel-studio #color-tray .palette-brushes>button,body.dark .pixel-studio #color-tray .paint-zoom-levels button{background:#48544a;border-color:#819277;color:#e0e9d4}body.dark .pixel-studio #color-tray .palette-brushes>button[aria-pressed=true],body.dark .pixel-studio #color-tray .paint-zoom-levels button[aria-pressed=true]{background:#93b586;color:#203e2b;border-color:#c0d4a8}body.dark .pixel-studio #color-tray #tools-toggle{background:linear-gradient(#60715c,#495e4b);border-color:#acc098;color:#f5f1d8}
@media(max-width:599px){
 .pixel-studio #color-tray{grid-template-columns:minmax(0,1fr);grid-template-rows:44px 88px 108px}
 .pixel-studio #color-tray #palette{--tile-height:44px;height:88px!important}.pixel-studio #color-tray #palette .swatch b{font-size:23px}
 .pixel-studio #color-tray .pixel-page-controls{grid-column:1;grid-row:3;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px;gap:8px;min-height:108px;height:108px;padding:5px 70px 5px 8px;border-left:0;border-top:2px solid #bdccb0;border-radius:0;background:linear-gradient(135deg,#f6f9ed,#e4eddb)}
 .pixel-studio #color-tray .palette-brushes{grid-column:1;grid-row:1;grid-template-columns:repeat(3,minmax(44px,1fr))}
 .pixel-studio #color-tray .paint-zoom-levels{grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(44px,1fr))}
 .pixel-studio #color-tray .paint-zoom-levels [data-zoom-stage=overview]{font-size:11px}.pixel-studio #color-tray .paint-zoom-levels [data-zoom-stage=overview]::after{display:none}
 .pixel-studio #color-tray .paint-zoom-levels button{font-size:12px}.pixel-studio #color-tray .palette-brushes>button{font-size:12px}
 .pixel-studio #color-tray #tools-toggle{inset:auto 10px 6px auto!important;width:52px;height:96px;min-height:44px;padding:5px!important;flex-direction:column;gap:8px;font-size:24px}
 .pixel-studio #color-tray #tools-toggle::after{content:'Menü';font-size:12px}
 .pixel-studio #color-tray .pixel-page-controls .pixel-hud{display:none}
 .pixel-studio #color-tray #selected-color{padding-right:0}
 body.dark .pixel-studio #color-tray .pixel-page-controls{border-top-color:#82977c}
}
@media(max-width:380px){
 .pixel-studio #color-tray .paint-zoom-levels [data-zoom-stage=overview]{font-size:0}
 .pixel-studio #color-tray .paint-zoom-levels [data-zoom-stage=overview]::after{content:'Bild';display:block;font:700 12px/1.2 system-ui}
 /* The same bare heading remains a drag surface when its compact handle is hidden. */
 .pixel-studio[data-palette-docked=false] #color-tray .floating-panel-handle{display:none}
}
@media(max-height:500px) and (min-width:600px){.pixel-studio #color-tray{grid-template-rows:44px 88px}.pixel-studio #color-tray #palette{--tile-height:44px;height:88px!important}.pixel-studio #color-tray .pixel-page-controls{grid-template-rows:44px 44px 44px;height:132px;min-height:132px;padding:0 10px;gap:0}.pixel-studio #color-tray #tools-toggle{bottom:0!important}}

/* A 36px visible surface has 4px breathing room inside its 44px touch target. */
.pixel-studio #color-tray .floating-panel-head #quiet-back{
 position:relative!important;
 flex:0 0 60px;
 box-sizing:border-box;
 width:60px;
 height:44px;
 min-width:60px;
 min-height:44px;
 padding:0;
 border:0;
 border-radius:12px;
 background:transparent;
 color:#fff8df;
 box-shadow:none;
 font-size:0;
 touch-action:manipulation;
}
.pixel-studio #color-tray .floating-panel-head #quiet-back::before{
 content:'';
 position:absolute;
 inset:4px 0;
 border:1px solid #c8ae65;
 border-radius:11px;
 background:linear-gradient(145deg,#39715a,#24513f);
 box-shadow:0 2px 4px #244d3d40,inset 0 1px #fff9d533;
 pointer-events:none;
}
.pixel-studio #color-tray .floating-panel-head #quiet-back::after{
 content:'';
 position:absolute;
 inset:50% auto auto 50%;
 width:32px;
 height:20px;
 transform:translate(-50%,-50%);
 background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M28 10H4m0 0 7 7M4 10l7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M28 10H4m0 0 7 7M4 10l7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 pointer-events:none;
}
.pixel-studio #color-tray .floating-panel-head #quiet-back:hover::before{background:linear-gradient(145deg,#458066,#2e624c);box-shadow:0 2px 4px #244d3d55,inset 0 1px #fff9d54d}
.pixel-studio #color-tray .floating-panel-head #quiet-back:focus-visible{outline:3px solid #f0ca62;outline-offset:-4px}
body.dark .pixel-studio #color-tray .floating-panel-head #quiet-back{color:#fff4cf}
body.dark .pixel-studio #color-tray .floating-panel-head #quiet-back::before{background:linear-gradient(145deg,#426b62,#2e504a);border-color:#ddc984;box-shadow:0 2px 4px #071a2155,inset 0 1px #f8ebc62e}