:root {
  --controls-height: 30px;
  --controls-padding: 15px;
  --progress-bar-height: 10px;
  --layout-margin-top: 70px;
  --color-bg: #2e2e2e;
  --color-fg: #e0e0e0;
  --color-control-bg: #1e1e1e;
  --color-secondary-bg: #383838;
  --color-progress-bar: #e9c835;
  --color-hero-button: #ca258b;
  --color-hover-hero-button: #9e1e6d;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--controls-padding);
  position: fixed;
  top: 0;
  background-color: var(--color-control-bg);
  z-index: 2; /* Ensure controls are above the progress bar */
  height: var(--controls-height);
}
.controls .left, .controls .right {
  display: flex;
  gap: 10px;
  padding-left: 14px;
  padding-right: 14px;
}
#modeSelect {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #575757;
  border-radius: 5px;
  background-color: var(--color-secondary-bg);
  color: #e0e0e0;
  appearance: none; /* Hide the default caret */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 6px center; /* Nudge caret a few pixels to the left */
  background-size: 16px; /* Increased caret size */
  padding-right: 30px; /* Adjust padding to accommodate larger caret */
  cursor: pointer;
}
#downloadButton {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between text and icon */
  padding: 6px 10px; /* Adjust padding to accommodate text and icon */
  background-color: #0000;
  border-style: none;
  border-radius: 5px;
  color: #c0c0c0;
  font-size: 12px;
  cursor: pointer;
}

#downloadButton::after {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="%23c0c0c0"><path d="M4.75 17.25a.75.75 0 0 1 .75.75v2.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V18a.75.75 0 0 1 1.5 0v2.25A1.75 1.75 0 0 1 18.25 22H5.75A1.75 1.75 0 0 1 4 20.25V18a.75.75 0 0 1 .75-.75Z"></path><path d="M5.22 9.97a.749.749 0 0 1 1.06 0l4.97 4.969V2.75a.75.75 0 0 1 1.5 0v12.189l4.97-4.969a.749.749 0 1 1 1.06 1.06l-6.25 6.25a.749.749 0 0 1-1.06 0l-6.25-6.25a.749.749 0 0 1 0-1.06Z"></path></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin-left: 5px; /* Space between text and icon */
}

#startButton {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  border-style: none;
  background-color: var(--color-hero-button);
  color: #ffffff; /* Changed text color to white */
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#startButton:hover {
  background-color: var(--color-hover-hero-button);
}
#startButton::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><polygon points="7,3 21,12 7,21"/></svg>'); /* Updated fill color */
  display: block;
  width: 24px;
  height: 24px;
}
#startButton.playing::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><rect x="4" y="4" width="16" height="16"/></svg>'); 
}
#modeSelect:hover {
  background-color: #3e3e3e;
}
#downloadButton:hover {
  background-color: #3e3e3e;
}

#modeSelect:focus-visible, #startButton:focus-visible, #downloadButton:focus-visible {
  outline: none;
  box-shadow: none;
}
.progress-bar-container {
  width: 100%;
  background-color: #414141;
  height: var(--progress-bar-height);
  position: fixed;
  top: calc(var(--controls-height) + (2 * var(--controls-padding)));
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 1; /* Ensure it is behind the controls container */
  opacity: 0;
}
.progress-bar-container.show {
  transform: translateY(0);
  opacity: 1;
}
.progress-bar {
  width: 0;
  height: 100%;
  background-color: var(--color-progress-bar);
}
.workspace {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin-top: var(--layout-margin-top); /* Adjust margin to avoid overlap with controls and progress bar */
}
.canvas-wrapper {
  position: relative;
}
canvas {
  display: block;
  border: 1px solid #535353;
  background-color: #383838;
}
.progress-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  display: none; /* Initially hidden */
}

/* Add styles for the drop overlay */
.drop-overlay {
  position: fixed;
  margin-top: var(--layout-margin-top); /* Adjust margin to avoid overlap with controls and progress bar */
  width: calc(100% - 25px); /* Add padding around the drop area */
  height: calc(100% - 85px); /* Add padding around the drop area */
  background-color: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.791);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3; /* Ensure it is above other elements */
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  border: 2px dashed rgba(255, 255, 255, 0.698);
  border-radius: 6px;
}

.drop-overlay.show {
  opacity: 1;
}

/* ---------- Three-dot overflow menu (encode + decode pages) ---------- */
/* Markup is built by createOverflowMenu() in overflow-menu.js. */

.overflow-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.overflow-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  border-style: none;
  background-color: transparent;
  cursor: pointer;
}

.overflow-button::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>');
  display: block;
  width: 16px;
  height: 16px;
}

.overflow-button:hover {
  background-color: #3e3e3e;
}

/* Drops down from the button; the controls bar is fixed to the top of the page. */
.overflow-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 150px;
  padding: 4px;
  border: 1px solid #575757;
  border-radius: 6px;
  background-color: var(--color-secondary-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.overflow-menu.open {
  display: block;
}

.overflow-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  color: var(--color-fg);
  cursor: pointer;
}

.overflow-item:hover:not(:disabled) {
  background-color: #3e3e3e;
}

.overflow-item:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Keyboard focus stays visible; the ring is offset so it clears the round
   button and the menu item's own rounded corners. */
.overflow-button:focus-visible,
.overflow-item:focus-visible {
  outline: 2px solid var(--color-hero-button);
  outline-offset: 2px;
}