/* PillMenu Base Styles */
:root {
  --pill-bg: rgba(0, 0, 0, 0.85);
  --pill-hover: rgb(48, 30, 86);
  --pill-active: #9333EA;
  --pill-number: #9333EA;
  --pill-text: rgba(255, 255, 255, 0.8);
  --pill-border: rgba(255, 255, 255, 0.1);
  --pill-shadow: rgba(0, 0, 0, 0.3);
}

/* Main Pill Menu Container */
#pill-menu {
  background-color: var(--pill-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  box-shadow: 0 2px 8px var(--pill-shadow);
  bottom: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  width: auto;
  flex-wrap: nowrap;
  position: fixed;
  min-width: fit-content;
  max-width: calc(100vw - 40px);
  overflow: visible;
  padding: 8px 12px;
}

/* Menu Items */
.pill-menu-item {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: transparent;
}

/* Make play button more rounded */
.pill-menu-item:has(.play-icon) {
  border-radius: 60%;
}

/* Arcade Studio Logo Specific Styling */
#arcade-studio-logo {
  border-radius: 8px; /* Less rounded for logo */
  width: auto;
  min-width: 30px;
  height: 30px;
  padding: 0;
}

#arcade-studio-logo button {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

#arcade-studio-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: all 0.2s ease;
}

#arcade-studio-logo:hover img {
  width: 28px;
  height: 28px;
}

.pill-menu-item:hover .menu-icon svg {
  stroke-width: 2.2;
}

/* Click-based active states */
.pill-menu-item.active {
  background-color: rgba(147, 51, 234, 0.3);
}

.pill-menu-item.active .menu-icon svg {
  stroke-width: 2.5;
  stroke: var(--pill-active);
}

.pill-menu-item.active .menu-icon svg,
.pill-menu-item.active-transform .menu-icon svg {
  stroke: var(--pill-active);
  stroke-width: 2.5;
}

/* Menu Icons */
.menu-icon {
  font-size: 16px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.menu-icon svg {
  width: 16px;
  height: 16px;
  stroke: white;
  stroke-width: 2;
}

/* Scene Properties Panel */
.scene-properties-panel {
  position: absolute;
  right: auto;
  bottom: 60px;
  width: 320px;
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  padding: 10px;
  overflow: hidden;
  /* Removed transform to prevent conflicts with opacity animation */
  left: 10px;
  background: var(--pill-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--pill-shadow);
  z-index: 11;
  box-sizing: border-box;
}

/* Container Layout */
.scene-properties-flex-container,
.scene-properties-section,
.scene-section,
.properties-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Content Areas */
.scene-content-container,
.properties-content-container {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Section Headers */
.section-header {
  cursor: pointer;
  user-select: none;
  margin: 8px 0;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.section-header:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.section-header .Label {
  font-weight: bold;
}

.section-header .toggle-icon {
  float: right;
  margin-right: 8px;
}

/* Section Headers - with purple background */
.section-header {
  cursor: pointer;
  user-select: none;
  margin: 8px 0;
  padding: 8px;
  background-color: rgba(147, 51, 234, 0.25) !important;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.section-header:hover {
  background-color: rgba(147, 51, 234, 0.35) !important;
}

/* Section Content */
.section-content {
  padding: 8px;
  background-color: transparent;
  position: relative;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
}

/* Row styles */
.Row {
  display: flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  flex-wrap: wrap;
  justify-content: space-between !important;
}

.Row .label-container {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  margin-right: 16px !important;
}
.Row .right-side-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  overflow: visible !important;
}
/* Add these styles to handle specific UI elements */
.Row .right-side-container canvas,
.Row .right-side-container .Color {
  margin-right: 4px !important;
}

.Row .right-side-container input[type="color"] {
  min-width: 30px !important;
}

.Row .right-side-container select {
  min-width: 80px !important;
  flex-grow: 1 !important;
}

.Row .right-side-container input[type="text"],
.Row .right-side-container input[type="number"] {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

.Row .right-side-container input[type="checkbox"] {
  flex: 0 0 auto !important;
}

/* Remove padding from Row when it contains script-rows */
.Row:has(.script-row),
.row:has(.script-row) {
  padding: 0;
}

/* Script container and rows - base styles for all script rows */
.script-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  transition: background-color 0.15s ease !important;
  background: rgba(12, 2, 22, 0.3) !important;
  border-radius: 0 !important; /* No rounded corners */
}

.script-row:hover {
  background: rgba(147, 51, 234, 0.4) !important;
}

/* Selected script row styling */
.script-row.selected {
  background: rgba(147, 51, 234, 0.6) !important;
  border-left: 4px solid rgba(147, 51, 234, 0.9) !important;
  padding-left: 4px !important;
}

.script-row.selected:hover {
  background: rgba(147, 51, 234, 0.7) !important;
}

.script-row .input-container {
  flex: 1 !important;
  min-width: 0 !important;
  margin-right: 8px !important;
  background: transparent !important;
}

.script-row .button-group {
  display: flex !important;
  gap: 0px !important; /* No gap between buttons */
  flex-shrink: 0 !important;
  margin-right: 0 !important; /* Ensure no extra margin */
}

/* Input styling in script rows */
.script-row input[type="text"] {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: white !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  border-radius: 0 !important;
}

.script-row input[type="text"]:hover,
.script-row input[type="text"]:focus {
  background: transparent !important;
  color: white !important;
  outline: none !important;
}

.script-row input[type="text"]::placeholder {
  color: rgba(247, 216, 255, 0.846) !important;
}

.script-row input[type="text"]::selection {
  background-color: rgba(147, 51, 234, 0.3) !important;
  color: white !important;
}

/* Override any potential browser autofill styles */
.script-row input[type="text"]:-webkit-autofill {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Button styling in script rows */
.script-row button {
  min-width: 30px !important;
  margin-left: 4px !important;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  transition: transform 0.2s ease !important;
}

.script-row button:hover {
  transform: scale(1.1) !important;
}

/* Icon styling in script rows - targeting Lucide SVG elements directly */
.script-row .lucide-icon,
.script-row [data-lucide] {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1px !important;
  stroke: rgba(255, 255, 255, 0.7) !important;
  transition: stroke 0.2s ease !important;
}

/* Change icon color on row hover */
.script-row:hover .lucide-icon,
.script-row:hover [data-lucide] {
  stroke: rgba(147, 51, 234, 0.95) !important; /* Lighter purple on hover */
}

/* Button hover effect in script rows */
.script-row button:hover .lucide-icon,
.script-row button:hover [data-lucide] {
  stroke: rgba(147, 51, 234, 1) !important; /* Even brighter purple on button hover */
}

/* Scripts container styles */
.scripts-container {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Input Fields */
.scene-properties-panel input[type="text"],
.scene-properties-panel input[type="number"],
.scene-properties-panel textarea,
.scene-properties-panel select,
.pill-menu-dropdown.scene-properties-panel input[type="text"],
.pill-menu-dropdown.scene-properties-panel input[type="number"],
.pill-menu-dropdown.scene-properties-panel textarea,
.pill-menu-dropdown.scene-properties-panel select {
  width: 100% !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 4px !important;
  font-size: 12px !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  border-radius: 4px !important;
}

.scene-properties-panel input[type="text"]:hover,
.scene-properties-panel input[type="number"]:hover,
.scene-properties-panel textarea:hover,
.scene-properties-panel select:hover,
.scene-properties-panel input[type="text"]:focus,
.scene-properties-panel input[type="number"]:focus,
.scene-properties-panel textarea:focus,
.scene-properties-panel select:focus,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:hover,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:hover,
.pill-menu-dropdown.scene-properties-panel textarea:hover,
.pill-menu-dropdown.scene-properties-panel select:hover,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:focus,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:focus,
.pill-menu-dropdown.scene-properties-panel textarea:focus,
.pill-menu-dropdown.scene-properties-panel select:focus {
  background-color: transparent !important;
  color: #fff !important;
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Input Fields - with purple background */
.scene-properties-panel input[type="text"],
.scene-properties-panel input[type="number"],
.scene-properties-panel textarea,
.scene-properties-panel select,
.pill-menu-dropdown.scene-properties-panel input[type="text"],
.pill-menu-dropdown.scene-properties-panel input[type="number"],
.pill-menu-dropdown.scene-properties-panel textarea,
.pill-menu-dropdown.scene-properties-panel select {
  width: 100% !important;
  background-color: rgba(147, 51, 234, 0.15) !important;
  border: 1px solid rgba(147, 51, 234, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 4px !important;
  font-size: 12px !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  border-radius: 4px !important;
}

.scene-properties-panel input[type="text"]:hover,
.scene-properties-panel input[type="number"]:hover,
.scene-properties-panel textarea:hover,
.scene-properties-panel select:hover,
.scene-properties-panel input[type="text"]:focus,
.scene-properties-panel input[type="number"]:focus,
.scene-properties-panel textarea:focus,
.scene-properties-panel select:focus,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:hover,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:hover,
.pill-menu-dropdown.scene-properties-panel textarea:hover,
.pill-menu-dropdown.scene-properties-panel select:hover,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:focus,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:focus,
.pill-menu-dropdown.scene-properties-panel textarea:focus,
.pill-menu-dropdown.scene-properties-panel select:focus {
  background-color: transparent !important;
  color: #fff !important;
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Helper Bar */
.scene-helper-bar-container {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--pill-bg);
  flex-shrink: 0;
}

/* Outliner */
.outliner-wrapper {
  flex: 1;
  overflow: auto;
  min-height: 0;
  height: 100%;
}

#outliner {
  width: 100%;
  flex: 1;
}

#outliner .Outliner {
  width: 100%;
  height: 100%;
  border: none;
}

/* Outliner Icons */
.option {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 60px;
}

.option .icon {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.option .icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.option .icon i {
  width: 14px;
  height: 14px;
  color: var(--pill-text);
}

.option .light-icon {
  right: 8px;
}

/* Prevent browser defaults */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pill-text);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Dropdown menus and option panels - allow JavaScript to control positioning */
.pill-menu-dropdown,
#pill-menu .pill-menu-dropdown {
  position: absolute !important;
  bottom: 60px !important;
  /* Left position handled by JavaScript */
  background-color: rgba(25, 10, 40, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 20px !important; /* Rounded corners for dropdown menus */
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3) !important;
  /* Default size - will be overridden by specific menus */
  min-width: 150px !important;
  max-width: 380px !important;
  z-index: 11 !important;
}

/* Scene menu size - consolidate and make more specific */
.pill-menu-dropdown.scene-properties-panel {
  position: absolute;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 360px;
  min-width: unset;
  max-width: unset;
  z-index: 11;
  box-sizing: border-box; /* Ensure proper width calculation */
}

/* Scene properties panel specific styles */
.scene-properties-panel {
  left: 0;
  height: calc(100vh - 120px);
  padding: 0;
  margin: 0;
  background: transparent;
  overflow-y: auto;
  box-sizing: border-box; /* Ensure proper width calculation */
}

/* Scene properties section styles */
.scene-properties-panel .section-content {
  padding: 8px;
  margin: 0;
  background: transparent;
  width: 100%;
  box-sizing: border-box; /* Ensure proper width calculation */

}

/* Script row styles */
.scene-properties-panel .script-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  margin: 0;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
  background: transparent;
  width: 100%;
}

.scene-properties-panel .script-row:hover {
  background: rgba(147, 51, 234, 0.3) !important;
}

.scene-properties-panel .script-row .input-container {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  background: transparent;
}

.scene-properties-panel .script-row input[type="text"] {
  width: 100%;
  background-color: transparent;
  border: none;
  color: white;
  padding: 4px 0;
  font-size: 12px;
  box-shadow: none;
  margin: 0;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.scene-properties-panel .script-row input[type="text"]:hover,
.scene-properties-panel .script-row input[type="text"]:focus {
  background-color: transparent;
  color: white;
  outline: none;
}

/* Remove any conflicting styles */
.scene-icon + .options,
.pill-menu-dropdown.scene-panel {
  width: unset;
  min-width: unset;
  max-width: unset;
}

/* History menu size */
.history-icon + .options,
.pill-menu-dropdown.history-panel {
  width: 330px !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* Project/File menu size */
.project-icon + .options,
.file-icon + .options,
.pill-menu-dropdown.project-panel,
.pill-menu-dropdown.file-panel {
  width: 160px !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* Script menu size */
.script-icon + .options,
.pill-menu-dropdown.script-panel {
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* Object properties menu size */
.properties-icon + .options,
.pill-menu-dropdown.properties-panel {
  width: 380px !important;
  min-width: unset !important;
  max-width: unset !important;
}

/* Add menu size */
.add-icon + .options,
.pill-menu-dropdown.add-panel {
  min-width: 200px !important;
  max-width: 300px !important;
}

/* Scene environment and background menu size */
.environment-icon + .options,
.background-icon + .options,
.pill-menu-dropdown.environment-panel,
.pill-menu-dropdown.background-panel {
  min-width: 320px !important;
  max-width: 420px !important;
}

/* Play menu size */
.play-icon + .options,
.pill-menu-dropdown.play-panel {
  min-width: 180px !important;
  max-width: 240px !important;
}

/* Info panel size */
.info-icon + .options,
.pill-menu-dropdown.info-panel {
  min-width: 280px !important;
  max-width: 350px !important;
}

/* Dropdown option styling */
.pill-menu-dropdown .option:hover,
.pill-menu-item .options .option:hover {
  background-color: rgba(147, 51, 234, 0.3) !important;
  color: #fff !important;
}

/* Active option state */
.pill-menu-dropdown .option.active,
.pill-menu-item .options .option.active {
  background-color: rgba(147, 51, 234, 0.4) !important;
  color: #fff !important;
}

/* Default option styling to maintain consistent layout */
.pill-menu-dropdown .option,
.pill-menu-item .options .option {
  padding: 8px !important;
  margin: 0 !important;
  width: 100% !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  color: #ddd !important;
  box-sizing: border-box !important;
  font-size: 12px;
  font-weight: 300;
}

/* First and last items in dropdown need special treatment */
.pill-menu-dropdown .option:first-child,
.pill-menu-item .options .option:first-child {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.pill-menu-dropdown .option:last-child,
.pill-menu-item .options .option:last-child {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* Menu item options */
.pill-menu-item .options,
#pill-menu .pill-menu-item .options {
  border-radius: 12px !important; /* Rounded corners for option panels */
  
  background-color: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  /* Position will be handled by JavaScript */
}

/* Active state for menu item options */
.pill-menu-item.active .options,
#pill-menu .pill-menu-item.active .options {
  opacity: 1 !important;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  #pill-menu {
    background-color: rgba(0, 0, 0, 0.85) !important;
  }
  
  .pill-menu-dropdown {
    background-color: rgba(0, 0, 0, 0.85) !important;
  }
  
  #pill-menu .pill-menu-dropdown,
  #pill-menu .pill-menu-item .options {
    background-color: rgba(0, 0, 0, 0.85) !important;
  }
  
  .transform-icon {
    filter: brightness(0) invert(1) !important;
  }
}

/* Transform tools styling */
.transform-controls {
  display: flex !important;
  margin-left: 5px !important;
}

.transform-buttons {
  display: flex !important;
  flex-direction: row !important;
}

.transform-icon {
  position: relative !important;
  transform-origin: center !important;
  transition: transform 0.3s ease !important;
}

.transform-icon:hover {
  transform: scale(1.1) !important;
}

/* Script-related styling */
.script-icon {
  position: relative !important;
  transform-origin: center !important;
  transition: transform 0.3s ease !important;
}

.script-icon:hover {
  transform: scale(1.1) !important;
}

.script-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

/* Play Button Icon */
.play-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #fff !important;
  stroke-width: 2 !important;
  fill: none !important;
  transition: stroke 250ms ease-in-out, stroke-width 250ms ease-in-out !important;
}

.pill-menu-item.active .play-icon svg {
  stroke: #9333EA !important; /* Purple color for active state */
  stroke-width: 2.5 !important; /* Make active icons slightly bolder */
}

/* Add hover effect to the play button */
.play-icon:hover svg {
  transform: scale(1.05) !important;
  transition: transform 0.2s ease !important;
}

/* Add hover effects to menu button icons */
.scene-icon:hover svg,
.add-icon:hover svg,
.world-icon:hover svg {
  transform: scale(1.08) !important;
  transition: transform 0.2s ease, stroke-width 0.2s ease !important;
}

/* Add transition effect to the pill menu item active state */
.pill-menu-item {
  transition: background-color 250ms ease-in-out, transform 250ms ease-in-out !important;
}

/* Menu dropdowns - hidden by default */
.pill-menu-dropdown {
  display: none;
}

.pill-menu-dropdown.scene-properties-panel {
  display: none;
}

/* Show dropdowns when parent is active - much simpler! */
.pill-menu-item.active .pill-menu-dropdown {
  display: block;
}

.pill-menu-item.active .pill-menu-dropdown.scene-properties-panel {
  display: block;
}

/* Alternative: Pure CSS hover approach (uncomment to use instead of JS) */
/*
.pill-menu-item:hover .pill-menu-dropdown {
  display: block;
}

.pill-menu-item:hover .pill-menu-dropdown.scene-properties-panel {
  display: block;
}
*/

.pill-menu-item.active {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.2);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(147, 51, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
  }
}

/* Player mode styles */
#pill-menu.player-mode {
  background-color: rgba(0, 0, 0, 0.5) !important;
  transition: width 300ms ease, padding 300ms ease, background-color 300ms ease !important;
  padding: 3px !important;
  width: 42px !important; /* Just enough for the button */
  height: 42px !important; /* Force same height as width */
  border-radius: 50% !important; /* Perfect circle */
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#pill-menu.player-mode .pill-menu-item.active {
  margin: 0 !important;
  animation: pulse-player-mode 2s infinite;
  width: 36px !important;
  height: 36px !important;
}

#pill-menu.player-mode .pill-menu-item.active .play-icon svg {
  stroke: var(--pill-active);
  stroke-width: 3 !important;
  animation: pulse-icon 2s infinite;
}

@keyframes pulse-player-mode {
  0% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(147, 51, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
  }
}

@keyframes pulse-icon {
  0% {
    stroke-width: 2.5;
  }
  50% {
    stroke-width: 3;
  }
  100% {
    stroke-width: 2.5;
  }
}

/* Make sure the play-stop icons are prominent */
.play-stop-icon {
  stroke-width: 2.5 !important;
}

/* Additional styling to emphasize play and stop states */
[data-lucide="play"] {
  margin-left: 2px !important; /* Slight offset for the play triangle */
}

[data-lucide="stop"] {
  margin: 0 !important; /* Reset margin for stop icon */
}

/* Info panel styling */
.info-icon {
  position: relative !important;
}

.info-panel {
  min-width: 280px !important;
  padding: 8px !important;
  border-radius: 4px !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.stats-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.stats-panel .Text {
  line-height: 1.4 !important;
  font-variant-numeric: tabular-nums !important;
}

.stat-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.stat-row .Text:first-child {
  margin-right: 4px !important;
  font-weight: bold !important;
}

/* Submenu */
.pill-menu .submenu,
#pill-menu .submenu {
  background-color: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border-radius: 12px !important;
}

/* Left-aligned menus (first set of menus) */
.pill-menu-item .options.left-aligned {
  left: 0;
}

/* Centered menus (remaining menus) */
/* JavaScript will handle positioning for these */

/* Submenu styling for all pill menus */
.pill-menu-item .options .submenu,
.pill-menu-dropdown .submenu,
.pill-menu-item .options .options {
  position: absolute !important;
  left: 100% !important; /* Position to the right of parent by default */
  bottom: 0 !important; /* Align with bottom of trigger instead of top */
  background-color: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  min-width: 200px !important;
  z-index: 12 !important; /* Higher than parent menu */
  display: none;
}

/* Make text fade faster than background */
.pill-menu-item .options .submenu .option,
.pill-menu-dropdown .submenu .option,
.pill-menu-item .options .options .option {
  transition: color 150ms ease, background-color 300ms ease !important;
}

/* Fix for File menu specifically */
.file-icon + .options .options {
  display: none;
  opacity: 0;
}

/* When hovering over a submenu trigger, show the submenu */
.pill-menu-item .submenu-title:hover .options,
.pill-menu-dropdown .submenu-title:hover .options,
.pill-menu-item .submenu-title:hover + .options,
.pill-menu-item .options .options:hover,
.pill-menu-dropdown .options:hover {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix for submenu fade behavior - ensure text fades before background */
.pill-menu-item .submenu-title:not(:hover) + .options:not(:hover),
.pill-menu-dropdown .submenu-title:not(:hover) .options:not(:hover) {
  transition-delay: 0ms, 150ms !important; /* Delay background fade */
}

.pill-menu-item .submenu-title:not(:hover) + .options:not(:hover) .option,
.pill-menu-dropdown .submenu-title:not(:hover) .options:not(:hover) .option {
  color: transparent !important;
  transition: color 100ms ease !important;
}

/* Ensure submenu-title has appropriate styling */
.submenu-title {
  position: relative !important;
  cursor: pointer !important;
}

/* Add an arrow indicator for submenu items */
.submenu-title::after {
  content: '→' !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  opacity: 0.7 !important;
}

/* Change the hover/active states for transform buttons to match */
.transform-buttons .pill-menu-item:hover,
.transform-buttons .pill-menu-item.active {
  background-color: rgba(147, 51, 234, 0.2) !important;
}

/* Script button styling */
.pill-menu-dropdown .option button,
.pill-menu-item .options .option button {
  background-color: rgba(147, 51, 234, 0.2) !important; /* Purple color for buttons */
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.pill-menu-dropdown .option button:hover,
.pill-menu-item .options .option button:hover {
  background-color: rgba(147, 51, 234, 0.4) !important; /* Darker purple on hover */
}

/* NEW script button */
#script-new {
  background-color: rgba(147, 51, 234, 0.3) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  margin-top: 8px !important;
  font-weight: normal;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

#script-new:hover {
  background-color: rgba(147, 51, 234, 0.5) !important;
}

/* Scene helper bar styling */
.scene-helper-bar {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 8px !important;
}

/* File menu icons container */
.file-menu-icons {
  display: flex !important;
  gap: 8px !important;
}

/* File menu icon button */
.file-menu-icon {
  background: none !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.file-menu-icon:hover {
  background-color: rgba(147, 51, 234, 0.2) !important;
}

.file-menu-icon i {
  color: #ddd !important;
  transition: all 0.2s ease !important;
}

.file-menu-icon:hover i {
  color: #fff !important;
}

/* Helper toggle buttons container */
.helper-toggle-buttons {
  display: flex !important;
  gap: 8px !important;
}


/* Remove the custom realtime-render-icon styles since we're using the standard menu-icon class */
.realtime-icon svg {
    stroke: #fff;
    stroke-width: 1.5; /* Reduced stroke width */
    fill: none;
    transition: stroke 150ms ease; /* Added transition for smoothness */
}

.pill-menu-item.active .realtime-icon svg {
    stroke: var(--pill-active); /* Keep active color */
    stroke-width: 1.5; /* Keep minimal stroke width */
}

/* Input field styles - consolidated and specific with higher specificity */
.scene-properties-panel input[type="text"],
.scene-properties-panel input[type="number"],
.scene-properties-panel textarea,
.scene-properties-panel select,
.pill-menu-dropdown.scene-properties-panel input[type="text"],
.pill-menu-dropdown.scene-properties-panel input[type="number"],
.pill-menu-dropdown.scene-properties-panel textarea,
.pill-menu-dropdown.scene-properties-panel select {
  width: 100% !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 4px !important;
  font-size: 12px !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  border-radius: 4px !important;
}

.scene-properties-panel input[type="text"]:hover,
.scene-properties-panel input[type="number"]:hover,
.scene-properties-panel textarea:hover,
.scene-properties-panel select:hover,
.scene-properties-panel input[type="text"]:focus,
.scene-properties-panel input[type="number"]:focus,
.scene-properties-panel textarea:focus,
.scene-properties-panel select:focus,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:hover,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:hover,
.pill-menu-dropdown.scene-properties-panel textarea:hover,
.pill-menu-dropdown.scene-properties-panel select:hover,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:focus,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:focus,
.pill-menu-dropdown.scene-properties-panel textarea:focus,
.pill-menu-dropdown.scene-properties-panel select:focus {
  background-color: transparent !important;
  color: #fff !important;
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}


.pill-menu-dropdown.scene-properties-panel .script-row input[type="text"]:hover,
.pill-menu-dropdown.scene-properties-panel .script-row input[type="text"]:focus {
  background-color: transparent !important;
  color: #fff !important;
  outline: none !important;
}

/* Override any potential browser autofill styles */
.script-row input[type="text"]:-webkit-autofill {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0 30px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Placeholder styling */
.script-row input[type="text"]::placeholder {
  color: rgba(247, 216, 255, 0.846);
}

/* Selection styling */
.script-row input[type="text"]::selection {
  background-color: rgba(147, 51, 234, 0.3);
  color: white;
}

.script-row input[type="text"] {
  color: white;
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  width: 130px;
}

.script-row input[type="text"]:hover,
.script-row input[type="text"]:focus {
  color: white;
  background-color: transparent;
  outline: none;
}

.script-row input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.script-row button {
  min-width: 30px;
  margin-left: 4px;
}

.script-row .right-side-container {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

/* Select Dropdowns */
.pill-menu-dropdown select,
.scene-properties-panel select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath fill='rgba(255,255,255,0.8)' d='M8 8L0 0h16z'/%3E%3C/svg%3E") !important;
  background-position: right 8px center !important;
  background-repeat: no-repeat !important;
  background-size: 8px 6px !important;
  padding-right: 24px !important;
}

.scene-properties-panel .Row {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.scene-properties-panel .Row .right-side-container {
  max-width: 55%;
  width: auto;
}

/* Make inputs and selects take full width in the right container */
.scene-properties-panel .Row .right-side-container input:not([type="checkbox"]),
.scene-properties-panel .Row .right-side-container select {
  width: 100%;
  min-width: 0;
}

/* Style for Label class elements */
.Row .label-container .Label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Row .right-side-container input[type="checkbox"] {
  flex: 0 0 auto;
}

.Row .right-side-container button,
.Row .right-side-container .Button {
  flex: 0 0 auto;
}

/* Ensure multiple form elements in a row are properly aligned */
.Row .right-side-container > * {
  margin-right: 4px;
}

.Row .right-side-container > *:last-child {
  margin-right: 0;
}

/* Style for multiple number inputs in the same row */
.Row .right-side-container input[type="number"] + input[type="number"],
.Row .right-side-container input[type="text"] + input[type="text"] {
  margin-left: 4px;
}

/* Style for inputs with units (XYZ coordinates, etc.) */
.Row .right-side-container input[type="number"]:not(:last-child) {
  max-width: calc(33% - 6px);
}

/* Ensure colors and other elements don't get too squished */
.Row .right-side-container .Color {
  min-width: 30px;
  min-height: 20px;
}




/* Add purple color to form elements focus state */
.scene-properties-panel input[type="text"]:focus,
.scene-properties-panel input[type="number"]:focus,
.scene-properties-panel textarea:focus,
.scene-properties-panel select:focus,
.pill-menu-dropdown.scene-properties-panel input[type="text"]:focus,
.pill-menu-dropdown.scene-properties-panel input[type="number"]:focus,
.pill-menu-dropdown.scene-properties-panel textarea:focus,
.pill-menu-dropdown.scene-properties-panel select:focus {
  border-color: rgba(147, 51, 234, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.3) !important;
}

/* Colors for UI elements that need a purple tint */
.Color {
  border: 2px solid rgba(147, 51, 234, 0.4) !important;
}

/* All inputs within script rows need to be transparent regardless of context */
.script-row input,
.pill-menu-dropdown .script-row input,
.scene-properties-panel .script-row input,
.pill-menu-dropdown.scene-properties-panel .script-row input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure script row inputs are always transparent */
[class*="script-row"] input,
[class*="script-row"] textarea,
div[class*="script-row"] input,
div[class*="script-row"] textarea,
.pill-menu-dropdown [class*="script-row"] input,
.scene-properties-panel [class*="script-row"] input {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Button hover effect in script rows */
.script-row button:hover i {
  stroke: rgba(147, 51, 234, 1) !important; /* Even brighter purple on button hover */
}

/* Script prompt input styles - consolidated */
.script-prompt-input {
  display: block;
  width: 100% !important;
  height: 100px !important; /* Increased from 80px to 100px */
  padding: 8px !important;
  padding-top: 8px !important; /* Ensure top padding is 8px */
  padding-bottom: 40px !important;
  margin-bottom: 10px !important;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.4;
  background-color: rgba(30, 30, 30, 0.7) !important;
  color: white !important;
  resize: none !important;
  border: 1px solid rgba(147, 51, 234, 0.5) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  position: relative !important;
  vertical-align: top;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure textarea placeholder shows at the top */
.script-prompt-input::placeholder {
  text-align: left;
  vertical-align: top;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Visual indicator for focused inputs */
.script-prompt-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.4) !important;
}

/* Script input styles */
.script-prompt-input,
textarea.script-prompt-input {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.script-prompt-input::placeholder,
textarea.script-prompt-input::placeholder {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure text wrapping in any prompt elements */
.prompt-box,
.pill-menu-dropdown .prompt-box,
.scene-properties-panel .prompt-box {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Realtime menu item uses standard pill menu item styling */

/* Default icon style */
.pill-menu-item.pill-menu-item-circle .realtime-icon svg {
  stroke: var(--icon-color, #fff); /* Default stroke color */
  stroke-width: 1.5; /* Reduced stroke width */
  transition: stroke 150ms ease;
}

/* Hover state: keep background, change icon stroke */
.pill-menu-item.pill-menu-item-circle:hover {
  background-color: var(--pill-bg); /* Explicitly keep original background */
}

.pill-menu-item.pill-menu-item-circle:hover .realtime-icon svg {
  stroke: var(--pill-active); /* Change stroke color on hover */
}

/* Active state: keep background, change icon stroke */
.pill-menu-item.pill-menu-item-circle.active {
  background-color: var(--pill-bg); /* Explicitly keep original background */
}

.pill-menu-item.pill-menu-item-circle.active .realtime-icon svg {
  stroke: var(--pill-active);
  stroke-width: 1.5; /* Keep minimal stroke width */
}