/* Root container for the template editor */
.template-editor {
  display: flex;
  flex-direction: column;
  padding: 0px 10px;
  margin: 0px;
  background: rgba(0, 0, 0, 0.5);
  /* border: 1px solid #ffffff26; */
  border-radius: 2px;
  /* margin-top:50px; */
  padding-bottom:3px;
}
.editor-action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  margin: 0px;
  /* background: #101010; */
  border-bottom: 1px solid #ffffff0a;
  height: 50px;
  position: sticky;
  left: 0px;
  /* width: 100%; */
  /* border-radius: 2px; */
  top: 0px;
  z-index: 1;
  backdrop-filter: blur(5px);
}
.pointer-events-none {
  pointer-events:none;
}
.new-component-section-actions {
  padding-bottom:10px;
}
.section-block-new-component .new-input-label {
  margin-bottom:5px;
  margin-top:15px;
  display:block;
  font-size:13px;
}
.section-block-new-component .section-name {
  color:#a4ffa7;
}
.section-block-new-component .section-header {
  padding: 15px 0px;
  padding-bottom: 5px;
}
.section-block-new-component {
  padding:10px;
  padding-top:5px;
}

.editor-action-container input, 
.editor-action-container button, 
.new-component-section-actions select, 
.new-component-section-actions input,
.new-component-section-actions button, 
.section-name input {
  background: #00000033;
  padding: 10px 20px;
  margin-top: 0px;
  color: #fff;
  border: 1px solid #ffffff26;
  width: auto;
  margin: 5px 0px;
  border-radius: 4px;
  height: 37px;
}
.section-name input {
  padding-left:10px;
  margin:0px;
  font-weight: bold;
}
.new-component-section-actions textarea {
  border-radius:4px;
}
.new-component-section-actions select, .new-component-section-actions input {
  padding-left:10px;
}
.new-component-section-actions button {
  cursor:pointer;
  margin-bottom:15px;
  margin-top: 10px;
}
.new-component-section-actions .prompt-text-area {
  height:80px;
}


.editor-action-buttons {
  margin-right: 5px;
}
.editor-action-container button {
  cursor:pointer;
}
.editor-action-container button:hover, .new-component-section-actions button:hover {
  background: #ffffff1a;
}
.editor-action-container button.inactive {
  opacity:0.3 !important;
  cursor: not-allowed;
}

/* Each section block within the editor */
.section-block {
  /* margin-bottom: 20px; */
  scroll-margin-top: 50px;
}
.section-block.section-generation-in-progress {
  pointer-events:none;
}
.section-block.section-generation-in-progress .section-content {
  filter:blur(20px);
}
.section-block.section-generation-in-progress .toggle-menu {
  opacity:0.2;
}
.section-block.section-generation-in-progress .prompt-container {
  opacity: 0.3;
}

/* Header for each section, containing the title and toggle menu */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: #000; /* Light gray background */
  padding: 10px 0px;
  /* border-radius: 4px 4px 0 0; /* Rounded top corners */
  /* border: 1px solid #ccc; */
}
.section-hidden:not(:last-of-type) .section-header {
  padding-bottom:0px;
}

/* Section name styling */
.section-name svg {
  width: 14px;
  cursor: pointer;
  margin-right:2px;
}
.section-name {
  font-weight: bold;
  /* color: #e5e5e5; */
  margin-left: 10px;
}

/* Container for the toggle menu buttons */
.toggle-menu {
  display: flex;
  gap: 8px;
}

/* Base styling for toggle menu buttons */
.toggle-menu button, .components-nav-map button {
  padding: 6px 12px;
  background-color: #00000033;
  border: 1px solid #ffffff26;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  transition: background-color 0.2s, color 0.2s;
}

/* Active state styling for buttons */
.components-nav-map button {
  width: 45px;
  height: 36px;
  margin-bottom: 10px;
}
.toggle-menu button.active, .components-nav-map button.active, .components-nav-map-item.active {
  color: white;
  /* border: 1px solid; */
}

/* Hover effect for buttons */
.toggle-menu button:hover, .components-nav-map button:hover, .components-nav-map-item:hover {
  background-color: #ffffff1a;
}

/* Content area for each section */
.section-content {
  /* border: 1px solid #ccc; */
  /* border-top: none; */
  padding: 0; /* Remove padding to allow editors to fill the space */
  max-height: calc(100vh - 255px);
  overflow: scroll;
}
.section-content.-full {
  /* max-height: none; */
}

/* Monaco Editor area styling */
.editor-area {
  width: 100%;
  height: calc(100vh - 255px);
}

/* Preview iframe styling */
.preview-frame {
  width: 100%;
  height: calc(100vh);
  border: none;
}
.websim-nav-group button {
  width: 45px;
}
.main-trigger-text-area {
  background: #00000030;
  padding: 20px;
  margin: 10px;
  margin-bottom:0px;
  color: #fff;
  border: 1px solid #ffffff26;
  border-radius:14px;
  height: 140px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  transition: all 0.2s;
  outline: none;
}
.main-trigger-text-area:hover, .main-trigger-text-area:focus {
  transform:scale(1.05);
  z-index: 3;
  background: #000000a1;
}
.main-trigger-text-area.error {
  border: 1px solid #ff000080;
}
.main-trigger-button {
  background: linear-gradient(246deg, #00000057, transparent);
  padding: 10px 20px;
  margin: 0px 10px;
  color: #fff;
  border: 1px solid #ffffff26;
  min-width: 225px;
  /* margin: 5px 0px; */
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  margin-top: 0px;
  font-size: 13px;
  margin-bottom: 20px;
  font-style: normal;
  border-top:1px solid #ffffff00;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  transition: all 0.2s;
}
.main-trigger-button:hover {
  background: #000000a1;
  transform: scale(1.05);
  margin-top:10px;
  /* border-top-left-radius: 14px; */
  /* border-top-right-radius: 14px; */
  border-top:1px solid #ffffff26;
}
.trigger-under-disclaimer {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff80;
  /* margin-top: 5px; */
  /* margin-left: 10px; */
  margin-bottom: 10px;
  font-style: italic;
  font-weight: 100;
  /* display: flex; */
  align-items: center;
  max-width: calc(100%);
  text-align: center;
}
.new-project-chats-container {
  margin: 0px 20px;
  padding-bottom:30px;
}
.websim-toggle {
  background: #00000033;
  padding: 10px 0px;
  margin-top: 0px;
  color: #fff;
  border: 1px solid #ffffff26;
  width: auto;
  margin: 5px 0px;
  border-radius: 4px;
  font-size:0.8em;
  width:82px;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  /* margin-left:5px; */
}
.websim-toggle {
  cursor: pointer;
  user-select: none;
  border-left: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  height: 37px;
}
.websim-toggle span {
  opacity: .3;
}
.websim-toggle span.active ,
.websim-toggle span:hover {
  opacity: 1;
}
.editor-name-container {
  display:flex;
  align-items:center;
}
.editor-name-container input {
  width: 300px;
  border-right: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  padding-left:15px;
}
.editor-full-template {
  padding: 0px;
  margin: 0px;
  border: none;
}
.editor-full-view {
  height: calc(100vh);
  border: none;
}

.components-nav-map {
  width:55px;
  padding: 10px;
  padding-right: 0px;
  position:relative;
  text-align: center;
}
.components-nav-map-sticky {
  position: fixed;
  top: 121px;
  pointer-events: none;
  /* when scrolling within, I want to scroll the elemnt behind, dont want it to stop the scroll */
  
}
.components-nav-map button {
  pointer-events:auto;
  margin-top:8px;
}
.components-nav-map-item {
  background: #00000033;
  font-size: 12px;
  margin: 0px;
  margin-bottom: 10px;
  border: 1px solid #ffffff26;
  padding: 0px 8px;
  border-radius: 4px;
  color: #555;
  cursor: pointer;
  pointer-events: auto;
  height: 37px;
  line-height: 37px;
}
.general-use-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.general-use-modal-content {
  background: #000000;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #ffffff26;
  width: 100%;
  max-width:850px;
  overflow:scroll;
  max-height: calc(100vh - 100px);
}
.general-use-modal-content p {
  margin-top: 15px;
  color: #ff2e2e;
}
.general-use-modal-buttons {
  margin-top:20px;
}
.general-use-modal-content button {
  cursor: pointer;
  background: #00000033;
  padding: 10px 20px;
  margin-top: 0px;
  color: #fff;
  border: 1px solid #ffffff26;
  width: auto;
  margin: 5px 0px;
  border-radius: 4px;
}
.general-use-modal-content button:hover {
  background: #ffffff1a;
}
.general-use-modal-content .close-btn {
  position: absolute;
  right: -11px;
  top: -17px;
}
.general-use-modal.errors-modal .general-use-modal-content {
  text-align:left;
}
.general-use-modal.errors-modal .general-use-modal-content .error-item {
  margin:20px;
}
.general-use-modal.errors-modal .general-use-modal-content .error-item .error-level {
  color: #bd1919;
  font-style: italic;
}
.general-use-modal.errors-modal .general-use-modal-content .error-item pre {
  white-space: break-spaces;
}
.general-use-modal-content button.footer-fix-errors {
  margin-top: 10px;
  text-align: center;
  display: block;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 10px;
  opacity:0.3;
  cursor: not-allowed;
}

/* Export Modal Styles */
.export-modal .general-use-modal-content {
  text-align: left;
  max-width: 500px;
}

.export-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ffffff1a;
}

.export-modal .modal-header h3 {
  margin: 0;
  color: #a4ffa7;
}

.export-modal .close-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.export-modal .close-btn:hover {
  background: #ffffff1a;
  color: #fff;
}

.export-options {
  margin: 20px 0;
}

.export-option {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  background: #00000033;
  transition: all 0.3s;
}

.export-option:hover {
  border-color: #a4ffa7;
  background: #00000066;
}

.export-option input[type="radio"] {
  margin-right: 15px;
  transform: scale(1.2);
}

.option-content {
  display: flex;
  align-items: center;
}

.option-icon {
  font-size: 24px;
  margin-right: 15px;
  min-width: 30px;
}

.option-details {
  flex: 1;
}

.option-details strong {
  display: block;
  color: #fff;
  margin-bottom: 5px;
  font-size: 16px;
}

.option-details span {
  color: #999;
  font-size: 14px;
  line-height: 1.4;
}

.export-modal .general-use-modal-content p {
  color: #ccc;
  margin-bottom: 10px;
}

.export-modal .general-use-modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 25px;
}

.export-modal .general-use-modal-buttons button {
  margin: 0;
  padding: 10px 20px;
}

.export-modal .general-use-modal-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.export-modal .general-use-modal-buttons button:first-child {
  background: #a4ffa7;
  color: #000;
  border-color: #a4ffa7;
}

.export-modal .general-use-modal-buttons button:first-child:hover:not(:disabled) {
  background: #8dd48f;
  border-color: #8dd48f;
}
.is_logical_component {
  pointer-events: none;
  border: none !important;
  background: #00000000 !important;
}
.active-error-container.active {
  border-color:#bd1919;
}
.active-error-container span {
  /* display: none; */
  color: #ffffff;
  position: absolute;
  bottom: 0px;
  right: 0px;
  /* width: 20px; */
  min-width: 12px;
  padding: 0px 3px;
  /* padding-left: 3px; */
  height: 12px;
  line-height: 14px;
  background: #bd1919;
  font-size: 8px;
  /* border-radius: 50%; */
  /* width: 100%; */
  /* height: 6px; */
  border-top-left-radius: 2px;
}