*{box-sizing:border-box;margin:0;padding:0;}
#mainContainer{
  width:100%;height:100dvh;display:flex;position:relative;
  background:#bcbcbc; /* dark gray-blue shade — better with white */
}
#leftContainer,#rightContainer{
  width:clamp(200px,20%,250px);height:100%;
  background:#fff;display:flex;flex-direction:column;align-items:center;
}
#canvasContainer{
  flex:1;min-width:280px;
  background:inherit; /* inherit from mainContainer */
  display:flex;justify-content:center;align-items:center;position:relative;
}
#toolBarContainer{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:#fff;height:44px;width:clamp(240px,50%,280px); /* responsive width */
  border-radius:12px;
  transition:top .45s ease,bottom .45s ease,opacity .45s ease;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  z-index:998;
}
#leftHeader,#rightHeader{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:10px;border-bottom:1px solid #ddd;
}
#mainContainer #leftToggleIcon,#mainContainer #rightToggleIcon{cursor:pointer;}
.closeLeftSidebar{width:0!important;overflow:hidden;}
.closeRightSidebar{width:0!important;overflow:hidden;}

/* ================= MOBILE ================= */
@media(max-width:640px){
  :root{--drawer-h:30dvh;}
  #mainContainer{flex-direction:column;}
  #canvasContainer{flex:1 1 auto;min-height:0;border:none;}

  #toolBarContainer{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:10px;top:auto;width:clamp(240px,80%,240px);
  }
  .drawerActive #toolBarContainer{
    bottom:auto;top:10px;
    transition-delay:.15s; /* sync timing with drawer closing */
  }

  #leftHeader svg,#rightHeader svg{display:flex;}

  /* Bottom icons */
  #mainContainer>#leftToggleIcon,#mainContainer>#rightToggleIcon{
    position:fixed;bottom:10px;z-index:1002;transition:transform .3s,opacity .3s;
  }
  #mainContainer>#leftToggleIcon{left:10px;transform:rotate(90deg);}
  #mainContainer>#rightToggleIcon{right:10px;transform:rotate(270deg);}

  body.drawerOpenLeft  #leftToggleIcon,
  #leftHeader #leftToggleIcon{transform:rotate(-90deg);}
  body.drawerOpenRight #rightToggleIcon,
  #rightHeader #rightToggleIcon{transform:rotate(90deg);}

  .drawerActive #mainContainer>#leftToggleIcon,
  .drawerActive #mainContainer>#rightToggleIcon{
    opacity:0;pointer-events:none;
  }

  #drawerContainer{
    width:100%;display:flex;flex-direction:column;overflow:hidden;
    height:0;transition:height .45s ease,opacity .45s ease;
    background:inherit;opacity:0;
  }
  #drawerContainer.open{
    height:clamp(30dvh,var(--drawer-h,30dvh),70dvh);
    opacity:1;
  }

  #drawerContainer>#leftContainer,#drawerContainer>#rightContainer{
    width:100%;height:100%;background:#fff;border-radius:0;
    box-shadow:0 -2px 10px rgba(0,0,0,.25);
    transition:opacity .45s ease;
  }
  #drawerContainer>#leftContainer,#drawerContainer>#rightContainer{display:none;opacity:0;}
  #drawerContainer.show-left>#leftContainer,
  #drawerContainer.show-right>#rightContainer{display:flex;opacity:1;}

  /* Drawer handle (white curved with shadow) */
  #drawerHandle{
    width:100%;height:20px;cursor:ns-resize;
    background:#fff;border-radius:20px 20px 0 0;
    display:flex;justify-content:center;align-items:center;
    box-shadow:0 -1px 6px rgba(0,0,0,.2);
  }
  #drawerHandle::before{
    content:"";width:40px;height:5px;background:#aaa;border-radius:2.5px;
  }
}

/* ================= DESKTOP FLOAT ICONS ================= */
@media(min-width:641px){
  #mainContainer>.floatingIcon{
    position:absolute;top:10px;z-index:1001;cursor:pointer;
    transition:transform .3s ease;
  }
  #leftToggleIcon.floatingIcon{left:10px;}
  #rightToggleIcon.floatingIcon{right:10px;}
  #leftToggleIcon.rotated, #rightToggleIcon.rotated {transform:rotate(180deg);}
}