/* V0.6.2 – Left Rail: frequent tools stay visible, drawing area remains free. */
body.hat062-left-rail{--hat062-rail:76px;--hat062-gap:8px}
body.hat062-left-rail main{box-sizing:border-box!important;padding-left:var(--hat062-rail)!important;width:100vw!important;min-width:0!important}
body.hat062-left-rail main .stage{min-width:0!important;width:auto!important;flex:1 1 auto!important}
/* Override old horizontal dock's !important direction safely. */
body.hat062-left-rail #hatStudioMount #hatDock{
 position:fixed!important;left:7px!important;right:auto!important;top:66px!important;bottom:43px!important;
 width:64px!important;max-width:64px!important;min-width:0!important;height:auto!important;
 transform:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
 justify-content:flex-start!important;flex-wrap:nowrap!important;gap:3px!important;
 box-sizing:border-box;padding:6px 5px!important;border-radius:14px!important;
 overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;scrollbar-color:#446978 transparent;
 background:linear-gradient(180deg,#173a49fa,#102a3afa 55%,#112532fa)!important;
 border:1px solid #537a8e!important;box-shadow:0 5px 22px #0006!important;
 overscroll-behavior:contain;
}
body.hat062-left-rail #hatDock .hat062-section{
 text-align:center!important;flex:0 0 auto;color:#91c3ca;font-weight:800;
 font-size:8px;letter-spacing:.06em;line-height:1.35;padding:7px 0 3px;
 border-top:1px solid #ffffff1d;margin-top:2px
}
body.hat062-left-rail #hatDock .hat062-section:nth-child(2){border-top:0;margin-top:0}
body.hat062-left-rail #hatStudioMount #hatDock button.hat062-tool{
 width:52px!important;min-width:52px!important;max-width:52px!important;
 height:50px!important;min-height:50px!important;flex:0 0 50px!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 background:transparent!important;border:1px solid transparent!important;border-radius:11px!important;
 padding:3px 1px!important;margin:0!important;white-space:nowrap;cursor:pointer;
 color:#e2f3fa!important;line-height:1.1;box-shadow:none!important;
}
body.hat062-left-rail #hatDock button.hat062-tool .hat062-glyph{font-size:23px;line-height:1.2;display:block;min-height:25px;font-weight:600;font-family:'Segoe UI Symbol','Segoe UI',sans-serif}
body.hat062-left-rail #hatDock button.hat062-tool small{font-size:9px!important;font-weight:650;display:block!important;color:#c3dce4!important;line-height:1.2!important}
body.hat062-left-rail #hatDock button.hat062-tool:hover{background:#285466!important;border-color:#4d8396!important}
body.hat062-left-rail #hatDock button.hat062-tool.hat062-active,
body.hat062-left-rail #hatDock button.hat062-tool[aria-pressed="true"]{background:#167983!important;border-color:#91e6d6!important;color:#fff!important;box-shadow:inset 3px 0 #9af9df!important}
body.hat062-left-rail #hatDock button.hat062-tool.hat062-active small{color:white!important}
body.hat062-left-rail #hatDock button.hat062-tool:disabled{opacity:.35;cursor:default}
body.hat062-left-rail #hatDock button.hat062-collapse{height:30px!important;min-height:30px!important;flex-basis:30px!important;background:#214858!important}
body.hat062-left-rail #hatDock button.hat062-collapse .hat062-glyph{font-size:19px;min-height:18px}
body.hat062-left-rail #hatDock button.hat062-collapse small{display:none!important}
body.hat062-left-rail #hatDock #hat062Color .hat062-glyph{color:var(--hat062-active-ink,#fff)}
body.hat062-left-rail #toolbar{left:calc(var(--hat062-rail) + 6px)!important}
/* Pen palette is a popover of the left rail, not a permanently floating top bar. */
body.hat062-left-rail #hatStudioMount #hat061InkBar.hat062-ink-popover{
 position:fixed!important;left:calc(var(--hat062-rail) + 8px)!important;right:auto!important;bottom:auto!important;
 width:min(295px,calc(100vw - var(--hat062-rail) - 20px));max-width:none!important;
 min-height:0;display:flex;flex-wrap:wrap;gap:9px!important;padding:13px!important;
 background:#173444f9;border:1px solid #5995a5;border-radius:14px;box-shadow:0 12px 35px #0009;
 z-index:1501!important;
}
body.hat062-left-rail #hatStudioMount #hat061InkBar.hat062-ink-popover[hidden]{display:none!important}
body.hat062-left-rail #hat061InkBar .ux-ink-title{display:block!important;width:100%}
body.hat062-left-rail #hat061InkBar .ux-color{width:32px;height:32px;flex-basis:32px}
body.hat062-left-rail #hat061InkBar .ux-size{min-height:36px;min-width:35px}
body.hat062-left-rail .hat062-popover{
 position:fixed;left:calc(var(--hat062-rail) + 8px);width:min(275px,calc(100vw - var(--hat062-rail) - 20px));
 max-height:65dvh;overflow:auto;z-index:1501;padding:13px;background:#173444f9;
 border:1px solid #5995a5;border-radius:14px;box-shadow:0 12px 35px #0009;color:#efffff;
 pointer-events:auto;
}
body.hat062-left-rail .hat062-popover[hidden]{display:none!important}
body.hat062-left-rail .hat062-popover h3{font-size:14px;margin:0 0 10px}
body.hat062-left-rail .hat062-popover p{font-size:11px;color:#b3d3dc;line-height:1.4;margin:8px 2px 0}
body.hat062-left-rail .hat062-shape-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body.hat062-left-rail .hat062-shape-grid button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:9px;border:1px solid #507d8e;background:#23495b;color:white;cursor:pointer;font-size:12px}
body.hat062-left-rail .hat062-shape-grid button span{font-size:22px}
body.hat062-left-rail .hat062-shape-grid button:hover{background:#226f75;border-color:#91dddb}
/* Keep object inspector and selection commands on the right; never cover the left rail. */
body.hat062-left-rail #hat061Selection{left:auto;right:12px}
body.hat062-left-rail #hat061Zoom{bottom:58px}
/* The old bottom dock must not reserve any visible area. */
body.hat062-left-rail.hat061-inking #hatDock{opacity:1!important;pointer-events:auto!important}
body.hat062-left-rail.hat062-rail-small{--hat062-rail:34px}
body.hat062-left-rail.hat062-rail-small #hatStudioMount #hatDock{
 left:4px!important;width:26px!important;max-width:26px!important;padding:3px!important;
 overflow:hidden!important;min-height:32px!important;bottom:auto!important;
}
body.hat062-left-rail.hat062-rail-small #hatDock> :not(.hat062-collapse){display:none!important}
body.hat062-left-rail.hat062-rail-small #hatDock .hat062-collapse{width:18px!important;min-width:18px!important;min-height:28px!important;height:28px!important;flex-basis:28px!important}
body.hat062-left-rail.hat062-rail-small #hatDock .hat062-collapse .hat062-glyph{font-size:16px}
@media(max-width:700px){
 body.hat062-left-rail{--hat062-rail:63px}
 body.hat062-left-rail #hatStudioMount #hatDock{left:4px!important;top:60px!important;bottom:39px!important;width:55px!important;max-width:55px!important;padding:5px 3px!important;gap:2px!important}
 body.hat062-left-rail #hatStudioMount #hatDock button.hat062-tool{width:47px!important;min-width:47px!important;max-width:47px!important;height:48px!important;min-height:48px!important;flex-basis:48px!important}
 body.hat062-left-rail #hatDock button.hat062-tool .hat062-glyph{font-size:21px}
 body.hat062-left-rail #hatDock button.hat062-tool small{font-size:8.5px!important}
 body.hat062-left-rail #hat061InkBar .ux-ink-title{display:block!important}
 body.hat062-left-rail.hat062-rail-small{--hat062-rail:30px}
 body.hat062-left-rail.hat062-rail-small #hatStudioMount #hatDock{left:2px!important;top:60px!important;width:24px!important;max-width:24px!important}
}
@media(max-height:620px){
 body.hat062-left-rail #hatDock .hat062-section{font-size:7px;padding-top:4px}
 body.hat062-left-rail #hatStudioMount #hatDock button.hat062-tool:not(.hat062-collapse){height:44px!important;min-height:44px!important;flex-basis:44px!important}
}
@media print{body.hat062-left-rail #hatDock,body.hat062-left-rail .hat062-popover,body.hat062-left-rail #hat061InkBar{display:none!important}body.hat062-left-rail main{padding-left:0!important}}
/* Parent Studio overlay ignores hits by design; enable clicks in the relocated ink popover. */
body.hat062-left-rail #hatStudioMount #hat061InkBar.hat062-ink-popover{pointer-events:auto!important}
body.hat062-left-rail.hat062-rail-small #hatStudioMount #hatDock > button.hat062-tool:not(.hat062-collapse),
body.hat062-left-rail.hat062-rail-small #hatStudioMount #hatDock > .hat062-section{display:none!important}


/* V1.1.0 – desktop-like application rail */
body.hat062-left-rail{--hat062-rail:84px}
body.hat062-left-rail #hatStudioMount #hatDock{
 left:8px!important;top:62px!important;bottom:42px!important;width:72px!important;max-width:72px!important;padding:8px 6px 10px!important;
 border-radius:10px!important;border:1px solid #7d90a0!important;
 background:linear-gradient(180deg,#f7f9fc 0%,#edf2f7 14%,#dde5ef 100%)!important;
 box-shadow:0 14px 30px rgba(20,33,46,.25)!important;
 scrollbar-color:#a5b3c1 transparent;
}
body.hat062-left-rail #hatStudioMount #hatDock::before{
 content:'CÔNG CỤ';display:block;text-align:center;font-size:9px;font-weight:800;letter-spacing:.08em;
 color:#55697c;padding:2px 0 8px;border-bottom:1px solid #cad3dc;margin-bottom:6px;flex:0 0 auto;
}
body.hat062-left-rail #hatDock .hat062-section{color:#6b7f92!important;font-size:8px!important;border-top:1px solid #d2d9e0!important;margin-top:5px!important;padding-top:6px!important}
body.hat062-left-rail #hatStudioMount #hatDock button.hat062-tool{
 width:58px!important;min-width:58px!important;max-width:58px!important;height:56px!important;min-height:56px!important;flex-basis:56px!important;
 color:#26435f!important;border:1px solid transparent!important;border-radius:10px!important;
}
body.hat062-left-rail #hatDock button.hat062-tool small{color:#587084!important}
body.hat062-left-rail #hatDock button.hat062-tool .hat062-glyph{color:#24415a!important}
body.hat062-left-rail #hatDock button.hat062-tool:hover{background:#e7eef6!important;border-color:#bac9d7!important}
body.hat062-left-rail #hatDock button.hat062-tool.hat062-active,
body.hat062-left-rail #hatDock button.hat062-tool[aria-pressed="true"]{background:linear-gradient(180deg,#d7eefb,#b9dcf3)!important;border-color:#6ea4c5!important;box-shadow:inset 3px 0 #2c77a6!important}
body.hat062-left-rail #hatDock button.hat062-collapse{background:#dce6ef!important;border-color:#b6c4d2!important}
@media(max-width:700px){body.hat062-left-rail{--hat062-rail:63px}body.hat062-left-rail #hatStudioMount #hatDock::before{content:'';display:none}body.hat062-left-rail #hatStudioMount #hatDock{background:linear-gradient(180deg,#173a49fa,#102a3afa 55%,#112532fa)!important;border-color:#537a8e!important}}