.images-list {
  flex: 0 0 300px;         /* fixed width */
  width: 300px !important;
  height: 800px !important;
  overflow-y: auto;        /* enable vertical scrollbar */
  overflow-x: hidden;      /* hide any horizontal overflow */
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow);

  scrollbar-width: thin;
  scrollbar-color: #4F545C #2C2D2F;
}

.images-list li {
  position: relative;
  overflow: hidden;
}

.images-list img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  cursor: pointer;
}

/* For WebKit browsers (Chrome, Edge, Safari) */
.images-list::-webkit-scrollbar {
  width: 8px;                 /* thin track */
}

.images-list::-webkit-scrollbar-track {
  background: #2C2D2F;        /* match your sidebar bg */
}

.images-list::-webkit-scrollbar-thumb {
  background-color: #4F545C;  /* a muted gray for the thumb */
  border-radius: 4px;         /* rounded corners */
  border: 2px solid #2C2D2F;  /* space around thumb */
}

.images-list::-webkit-scrollbar-thumb:hover {
  background-color: #606570;  /* slightly lighter on hover */
}

.render-container {
  flex: 0 0 300px !important;  /* no grow, no shrink, basis 300px */
  width: 300px !important;
  height: 800px;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow);
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.render-container img {
  position: absolute !important;
  top: 47% !important;
  left: 65% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none !important;
}

#macroOutput {
  background: var(--card-bg);
  color: var(--text-light);
  padding: 1rem;
  border-radius: 4px;
  font-family: monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}

.macro-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.macro-actions .btn {
  background-color: var(--card-bg) !important;
  border-color:     var(--card-bg) !important;
  color:            var(--text-light) !important;
}
.macro-actions .btn:hover,
.macro-actions .btn:focus {
  background-color: #4A4B4D !important;
  border-color:     #4A4B4D !important;
}