:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: #000;
  font-family: 'Inter', system-ui, sans-serif;
}

.spectrum-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.spectrum-app.has-settings {
  overflow-y: auto;
}

/* The scope fills everything above the (optional) bottom settings panel. */
.spectrum-app__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.spectrum-app.has-settings .spectrum-app__viewport {
  flex: 0 0 var(--spectrum-viewport-height, 100%);
  height: var(--spectrum-viewport-height, 100%);
}

.spectrum-scope {
  position: absolute;
  inset: 0;
}

.spectrum-scope__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Settings gear — appears on hover (like the app's scope chrome). */
.spectrum-app__gear {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-secondary, rgba(255, 255, 255, 0.62));
  background: var(--control-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--control-border, rgba(255, 255, 255, 0.08));
  border-radius: 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.spectrum-app:hover .spectrum-app__gear,
.spectrum-app__gear.is-active {
  opacity: 1;
}

.spectrum-app__gear:hover {
  color: var(--text-primary, #fff);
  background: var(--control-bg-hover, rgba(255, 255, 255, 0.08));
}

.spectrum-app__gear.is-active {
  color: var(--accent, #38bdf8);
  border-color: var(--control-border-active, rgba(56, 189, 248, 0.4));
}

/* Settings panel along the bottom. The editor asks the host to grow by this height,
   but Windows DAWs may delay or constrain that resize, so the viewport locks to its
   previous height and this panel overflows instead of shrinking the scope. */
.spectrum-app__panel {
  flex: 0 0 280px;
  width: 100%;
  overflow-y: auto;
  padding: 12px;
  background: var(--settings-bg-top, rgba(8, 10, 14, 0.96));
  border-top: 1px solid var(--panel-outline, rgba(255, 255, 255, 0.12));
}

.spectrum-scope__peak {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font: 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  color: var(--scope-overlay-text, rgba(255, 255, 255, 0.82));
  background: var(--scope-overlay-surface, rgba(8, 12, 18, 0.82));
  border: 1px solid var(--scope-overlay-border, rgba(255, 255, 255, 0.12));
}

.spectrum-scope__peak.is-corner {
  top: 8px;
  left: 8px;
}

.spectrum-scope__peak.is-following {
  transform: translate(-50%, -120%);
}

.spectrum-scope__peak-sep {
  opacity: 0.4;
}
