#app { width: 100%; height: 100vh; display: flex; flex-direction: column; }
#toolbar { height: 48px; background: #141414; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; }
#main-container { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.sidebar { width: 280px; flex-basis: 280px; transition: width 0.2s ease-in-out, flex-basis 0.2s ease-in-out; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#sidebar-left { border-right: 1px solid #2a2a2a; }
#sidebar-right { border-left: 1px solid #2a2a2a; }

#main-container.left-panel-hidden #sidebar-left { width: 0; flex-basis: 0; min-width: 0; border-right: none; overflow: hidden; }
#main-container.right-panel-hidden #sidebar-right { width: 0; flex-basis: 0; min-width: 0; border-left: none; overflow: hidden; }

#main-container.no-transition .sidebar { transition: none !important; }

#canvas-container { flex: 1; position: relative; background: #000; min-width: 0; }
#bottom-bar { height: 32px; background: #141414; border-top: 1px solid #2a2a2a; display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: #888; flex-shrink: 0; }
.tool-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tool-btn:disabled:hover { background: transparent; border-color: #2a2a2a; }