/* styles.css - minimal styling to match the requested layout */

body, html {
  height: 100%;
  margin: 0;
}

.top-toolbar {
  height: 120px; /* increased to fit icons strip */
  background: #f8f9fa;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
}

.autodraw-top {
  height: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px;
  border-top: 1px dashed #e6e6e6;
  background: #ffffff;
  display: flex;
  align-items: center;
}

#autodraw-top-icons {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 4px;
}

.autodraw-top-icon {
  min-width: 56px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: white;
  padding: 6px;
  cursor: pointer;
}

.left-toolbar {
  width: 64px;
  background: #f1f1f1;
  border-right: 1px solid #e6e6e6;
}

.left-toolbar .tool-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.left-toolbar .tool-icon.active {
  background: #d7eaff;
  border: 1px solid #9fc9ff;
}

.resizable-canvas-wrapper {
  width: 100%;
  height: calc(100vh - 120px - 24px); /* top toolbar + padding */
  background: white;
  border: 1px dashed #ddd;
  resize: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#drawing-canvas {
  background: #ffffff;
  width: 100%;
  height: 100%;
  display: block;
}

/* autodraw panel on right */
.autodraw-panel {
  width: 220px;
  border-left: 1px solid #e6e6e6;
  background: #fafafa;
}

/* small thumbs in autodraw */
.autodraw-thumb {
  width: 64px;
  height: 64px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: white;
}

/* help text, hidden controls */
#draw-controls, #text-controls, #shape-controls {
  display: inline-flex;
}

/* responsive tweaks */
@media (max-width: 768px) {
  .autodraw-panel { display: none; }
  .left-toolbar { width: 48px; }
  .left-toolbar .tool-icon { width: 40px; height: 40px; }
}