/* --- Global Styles & Fonts --- */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Mono&display=swap");

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #555 var(--bg-secondary);
  box-sizing: border-box;
}

:root {
  /* Default Dark Theme */
  --bg-primary: #212121;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #000000;
  --bg-quaternary: #383838;
  --bg-pentary: #2d2d2d;
  --text-primary: #e0e0e0;
  --icon-primary: #e0e0e0;
  --text-secondary: #888;
  --border-color: #424242;
  --accent-primary: #2196f3;
  --accent-dark: #1976d2;
  --danger-color: #f44336;
  --folder-color: #ffca28;
  --project-color: #64b5f6;
  --file-color: #cfd8dc;
  --invisible-char-color: #555;
  --selection-bg: rgba(255, 255, 255, 0.08);
  --divider-color: #424242;
}

body.light-theme {
  /* Light Theme Overrides */
  --bg-primary: #c7e4ff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ffffff;
  --bg-quaternary: #a2d2ff;
  --bg-pentary: #e3f2fd;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --icon-primary: #ffffff;
  --border-color: #585858;
  --folder-color: #d38300; /* A darker, more readable amber/gold */
  --project-color: #1976d2; /* The theme's primary dark blue */
  --file-color: #4a5568; /* A readable slate grey for files */
  --selection-bg: rgba(33, 150, 243, 0.15);
  --divider-color: #a0aec0;
  /* Other colors can remain the same or be adjusted */
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Roboto", sans-serif;
  display: flex;
  height: 100%;
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 16px;
  overflow: hidden; /* Prevent scrollbars during drag */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Hides controls that shouldn't be visible in a shared view */
body.share-view .is-owner-control {
  display: none !important;
}

/* --- Layout & Core UI --- */

.container,
#main-content,
#workspace {
  max-width: 100%;
  overflow-x: hidden;
}

.container {
  display: flex;
  width: 100%;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}
.panel {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 200px;
}

.card {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.panel-header {
  display: flex;
  flex-direction: column; /* Stacks the two rows vertically */
  gap: 8px;
  padding: 0 8px;
  flex-shrink: 0;
}
.panel-header > .header-row:nth-child(2) {
  justify-content: flex-start;
  gap: 8px; /* Add a small gap between the buttons */
}
h3 {
  margin: 0;
  font-weight: 500;
}
.hidden {
  display: none !important;
}
.panel-header-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

#project-name-input {
  flex-grow: 1;
  max-width: 450px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
}

body.light-theme #project-name-input {
  border-color: #cbd5e0;
}

#main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

#workspace {
  flex-grow: 1; /* Allow workspace to fill remaining vertical space */
  display: flex;
  gap: 0;
  min-height: 0; /* Critical for flexbox children to scroll correctly */
}

#editor-container,
#console-container {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 10; /* Card has no padding, CodeMirror/Xterm handle it */
  position: relative; /* Required for positioning the spinner inside */
}

#editor-container {
  position: relative;
  flex: 1 1 0; /* allow shrinking and growing */
  height: 100%;
  min-height: 0; /* CRUCIAL for flex overflow */
  min-width: 0; /* sometimes needed to prevent horizontal scroll */
  display: flex;
}

.spinner {
  position: absolute;
  bottom: 15px;
  right: 24px;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2); /* The faint circle part */
  border-top-color: var(--text-primary); /* The visible spinning part */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: spin 1.5s linear infinite;
}

/* --- Draggable Divider Styles --- */
#drag-divider {
  flex-basis: 8px;
  flex-shrink: 0;
  background-color: var(--divider-color);
  cursor: col-resize;
  border-radius: 4px;
  margin: 0 4px;
}
body.is-dragging {
  cursor: col-resize;
  user-select: none;
}

/* --- Projects Panel (Left) --- */
.projects-panel {
  flex: 0 0 300px;
  padding: 8px;
  background-color: var(--bg-quaternary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease-in-out;
}

#auth-container {
  padding: 8px;
  border-top: 1px solid var(--border-color); /* Changed from border-bottom */
  margin-top: auto; /* Pushes the element to the bottom */
}
#user-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#user-name {
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Tree View Styles --- */

#project-list {
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  border-left: 2px solid var(--border-color);
  border-right: 2px solid var(--border-color);
  background-color: var(--bg-pentary);
}

#project-list,
#project-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#project-list {
  overflow-y: auto;
  flex-grow: 1;
}
#project-list li {
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
#project-list li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

#project-list .node-icon {
  width: 20px;
  text-align: center;
  transition: transform 0.2s ease-in-out; /* For rotation */
}
#project-list .node-name {
  flex-grow: 1;
}

/* NEW: The row for a single node's content */
.node-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 4px;
}
.node-row:hover {
  background-color: var(--selection-bg);
}
li.selected > .node-row {
  background-color: var(--selection-bg);
  outline: 1px solid var(--accent-primary); /* Use the theme's blue for the outline */
  outline-offset: -1px; /* Pushes the outline inside the element's padding */
}

#project-list li .node-icon {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  font-weight: bold;
  color: var(--text-primary);
}
.node-name {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
#project-list li.folder > .node-row .node-name {
  color: var(--folder-color);
  font-weight: 500;
}
#project-list li.project > .node-row .node-name {
  color: var(--project-color);
  font-weight: 500;
}
#project-list li.file > .node-row .node-name {
  color: var(--file-color);
}

/* Hide children of collapsed nodes */
#project-list li:not(.open) > ul {
  display: none;
}
#project-list li.open > .node-row .node-chevron {
  transform: rotate(90deg);
}

/* --- Collapsible Panel Styles --- */
.projects-panel.collapsed {
  flex-basis: 50px;
  flex-grow: 0;
  min-width: 50px;
  overflow: hidden;
}

.projects-panel.collapsed > #auth-container,
.projects-panel.collapsed > #project-list,
.projects-panel.collapsed > .panel-header > .header-row:nth-child(2) {
  display: none;
}

.projects-panel.collapsed > .panel-header .header-row:nth-child(1) > h3 {
  display: none;
}

/* THIS IS THE FIX: Justify to the right */
.projects-panel.collapsed > .panel-header .header-row:nth-child(1) {
  justify-content: flex-end;
}

#projects-toggle-button {
  transition: transform 0.3s ease-in-out;
}

.projects-panel.collapsed #projects-toggle-button {
  transform: rotate(180deg);
}

/* Hide command row when logged out */
.projects-panel.logged-out .header-row:nth-child(2) {
  display: none;
}

/* Styles for the two-row header */
.panel-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
  flex-shrink: 0;
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-row h3 {
  margin: 0;
  font-weight: 500;
}
.header-row .icon-button {
  font-size: 20px;
}

/* --- Expand/Collapse Icon Rotation --- */
#expand-all-button {
  transform: rotate(90deg); /* Points down */
}

#collapse-all-button {
  transform: rotate(-90deg); /* Points up */
}

/* --- Buttons --- */
.run-button,
.save-button,
.google-button,
.logout-button {
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center; /* This vertically centers the icon and text */
  justify-content: center; /* This horizontally centers them */
  gap: 8px; /* This adds a nice space between the icon and text */
}
.run-button {
  background-color: var(--accent-primary);
  color: white;
}
.run-button:hover {
  background-color: var(--accent-dark);
}
.save-button {
  background-color: #4caf50;
  position: relative;
  /* Set a minimum width to prevent size changes during transition */
  min-width: 120px;
}
.save-button:hover {
  background-color: #45a049;
}
.save-button .btn-content {
  /* Stack all content spans on top of each other */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Required for flex alignment */
  display: flex;
  align-items: center;
  gap: 8px;

  /* Hide by default and set up transition */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;

  pointer-events: none; /* Prevents interaction when hidden */
}
/* Show the correct content based on the button's data-state */
.save-button[data-state="idle"] .idle,
.save-button[data-state="saving"] .saving,
.save-button[data-state="success"] .success {
  /* Make the active span take up space and be visible */
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
#run-and-save-group {
  flex-grow: 1;
}
.run-button,
.save-button {
  min-width: 120px;
}

.google-button {
  width: 100%;
  background-color: #fff;
  color: #444;
}
.google-button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.logout-button {
  background: none;
  box-shadow: none;
  color: var(--text-primary);
  font-size: 0.8em;
  padding: 4px 8px;
}
.logout-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.delete-node-button {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1.4em;
  padding: 0 8px;
  border-radius: 4px;
  margin-left: auto;
  visibility: hidden;
  opacity: 0.6;
}
.node-row:hover .delete-node-button {
  visibility: visible;
}

#project-list li:hover .delete-node-button {
  visibility: visible; /* Show on hover */
}
.delete-node-button:hover {
  background-color: var(--danger-color);
  opacity: 1;
}

.node-actions-button {
  /* Renamed from .delete-node-button */
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0 8px;
  border-radius: 50%;
  margin-left: auto;
  visibility: hidden;
  opacity: 0.6;
  display: flex;
  align-items: center;
}
.node-row:hover .node-actions-button {
  visibility: visible;
}
.node-actions-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

/* --- Context Menu Styles --- */
.context-menu {
  position: fixed;
  z-index: 1000;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  padding: 5px 0;
}
.context-menu.show {
  /* .context-menu also needs .show */
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.context-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.context-menu-item.delete {
  color: var(--danger-color);
}

/* --- Icon Image Styles --- */
/* Style for the image in the header button */
.icon-button img {
  width: 18px;
  height: 18px;
  vertical-align: middle; /* Helps with alignment */
}

.icon-button svg {
  width: 24px;
  height: 24px;
  color: white;
}

/* Style for the image in the file tree list */
.node-icon img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: transparent;
}
/* --- Icon Button Styles --- */
.icon-button {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  transition: transform 0.3s ease-in-out;
}
.icon-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Settings Dropdown --- */
.settings-container {
  position: relative;
  margin-left: auto; /* Pushes settings to the far right */
}
/* --- Dropdowns & Menus --- */
.dropdown-container {
  position: relative;
}
.dropdown-menu,
.context-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  position: absolute;
  top: 120%;
  right: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 10;
  min-width: 180px;
  padding: 5px 0;
}
.dropdown-menu.show,
.context-menu.show {
  /* .context-menu also needs .show */
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
/* --- NEW: Style for links within menus --- */
.dropdown-menu a.menu-item {
  color: var(--text-primary); /* Use our theme's default text color */
  text-decoration: none; /* Remove the underline */
  width: 100%; /* Ensure it fills the space like other items */
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.menu-icon {
  width: 24px; /* Ensure the container itself has a fixed width */
  height: 24px; /* Ensure the container itself has a fixed height */
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-icon img {
  width: 18px; /* A good size for a menu item */
  height: 18px;
  object-fit: contain; /* Scales the image down to fit, without stretching */
  vertical-align: middle; /* Helps with alignment */
}
.menu-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 8px 0;
}
.context-menu {
  top: 35px;
  right: 10px;
  min-width: 140px;
}
.context-menu-item {
  padding: 8px 16px;
}
.context-menu-item.delete {
  color: var(--danger-color);
}

#new-item-dropdown {
  left: 0; /* Align to the left of its container */
  right: auto; /* Unset the generic 'right' alignment */
}

/* --- Editor & Terminal --- */
.editor-card {
  padding: 0;
}
.CodeMirror {
  flex-grow: 1;
  height: auto;
  border: none;
  color: initial;
}
.cm-s-eclipse.CodeMirror pre {
  color: black;
}
.cm-invisible-char {
  color: var(--invisible-char-color);
}
.cm-show-whitespace .cm-tab::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2ch;
  right: 0.2ch;
  border-top: 1px dotted var(--invisible-char-color);
}
#terminal-container {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #000;
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

/* --- Custom Scrollbar Styles --- */

/* For Webkit browsers like Chrome, Safari, Edge */
::-webkit-scrollbar {
  width: 12px; /* Width of the entire scrollbar */
  height: 12px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary); /* Color of the tracking area */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #555; /* Color of the scroll thumb */
  border-radius: 10px;
  border: 3px solid var(--bg-secondary); /* Creates padding around the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #777; /* Color on hover */
}

/* --- Autocomplete Hint Styles --- */
.CodeMirror-hints {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 2px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  max-height: 20em;
  overflow-y: auto;
}

.CodeMirror-hint {
  margin: 0;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: pre;
  color: var(--text-primary);
  cursor: pointer;
}

li.CodeMirror-hint-active {
  background: var(--accent-primary);
  color: white;
}

/* --- Settings Menu Divider --- */
.menu-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 8px 0;
}

/* --- Modal Styles --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: var(--bg-secondary);
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 500px;
  position: relative;
}

.modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0.7;
}
.modal-close-button:hover {
  opacity: 1;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content ul {
  padding-left: 20px;
}
.modal-content li {
  margin-bottom: 10px;
}

/* --- Linting (Error Checking) Styles --- */
.CodeMirror-lint-markers {
  width: 16px;
}

/* Red 'x' icon for critical errors */
.CodeMirror-lint-marker-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANhJREFUOE+tkjFKA0EQRd/BQUFB8BkkJt7C2NnZWIsbWJvBwVZCwcnqH50bEExM7E18g42VnYWNlZ2dhYVsr5yZcOAS38BS+5v7wV7YASfQBa6a9EC+eS9YQZcBG3pI/JCKg7vYIGwCH/A78Ao+gPdxoA7sAd3gEDTKuAmMtaOJfoA+cAUTgDNkh33QAV5HwJFGyN88sAY89Gg4EwL0ARsYwFqQjbhz/ARe4pLgfeK/pL8E/Lj2/q732QptgYvY+144dM+xVdEX+Xf4AxHl3wJ/UCf3xAAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

/* Yellow triangle icon for warnings */
.CodeMirror-lint-marker-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAR5JREFUOE+Vj7FOwkAUhb8kKIoiYAn7SyxCEl/CwlaWllZSfAELG1sbC/kNSCwtLSxtTfAF7I2I4ExMREwVLy8zue/ce3d2sRza2t5fA+h0Mze7dDprr2uF/6dYfQJgAY/AWbAG7OAZsAAGsIsdADfAWbAEbsAD+AI/gHpgCuwV+g2MdeDaQAXARbAPfIAt4A10gi4fMh4A5/AR6AFLwAbQtEvQfglsAVsYwFrwAix5v8t7wBf4B1gD/gGf4A/gGtgBf6vfX/A8kAnb1717n10gIOfwDsYA7YA62AOfALvYda7sA8+gB2w0+2/w/4F3gDk0D/sB7/gE6wBG/gB3AE/gCnwFBf+yqgAF8ACUAFsgB2wFXwA/gEvwFvwH5A5wA2wFXwB/gG/gK1A4y3/AAnAAYgAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

/* Red squiggly underline for errors */
.cm-s-material-darker .cm-error {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3e%3cpath d='m0 2.5 q3 0 6 0' stroke='%23E53935' stroke-width='0.6' fill='none' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: repeat-x;
  background-position: bottom;
}

/* Yellow squiggly underline for warnings */
.cm-s-material-darker .cm-warning {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3e%3cpath d='m0 2.5 q3 0 6 0' stroke='%23FFCA28' stroke-width='0.6' fill='none' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: repeat-x;
  background-position: bottom;
}

.CodeMirror-lint-tooltip {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

/* --- NEW: Custom Modal Styles --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: var(--bg-secondary);
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 450px;
  position: relative;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 8px;
}
.modal-content p {
  margin-top: 0;
  margin-bottom: 16px;
  opacity: 0.8;
}

/* --- NEW: Styles for Input with Copy Button --- */
.input-with-button {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.input-with-button #modal-input {
  padding-right: 40px; /* Make room for the button */
  margin-bottom: 0; /* Remove margin from the input itself */
}

#modal-input {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-button {
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-button.primary {
  background-color: var(--accent-primary);
  color: white;
}
.modal-button.primary:hover {
  background-color: var(--accent-dark);
}
.modal-button.secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.modal-button.secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.modal-button.destructive {
  background-color: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}
.modal-button.destructive:hover {
  background-color: #d32f2f; /* A slightly darker red */
}

/* --- NEW: Rename Input Style --- */
.node-rename-input {
  background-color: var(--bg-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 3px;
  color: var(--text-primary);
  font-family: inherit; /* Use the same font as the rest of the list */
  font-size: inherit;
  padding: 2px 4px;
  outline: none;
  width: 80%; /* Ensure it doesn't overflow */
}

#modal-copy-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-primary);
  opacity: 0.7;
}
#modal-copy-button:hover {
  opacity: 1;
}

/* --- Horizontal Layout Styles --- */
#workspace.horizontal-layout {
  flex-direction: column; /* Stack editor and console vertically */
}

#workspace.horizontal-layout #drag-divider {
  flex-basis: 8px; /* Becomes height */
  width: 100%; /* Spans the full width */
  height: 8px;
  cursor: row-resize; /* Vertical resize cursor */
  margin: 4px 0;
}

/* Make the visual handle on the divider horizontal */
#workspace.horizontal-layout #drag-divider::before {
  width: 50px;
  height: 2px;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--text-primary); /* Sets the icon color */
  user-select: none; /* Prevents the user from accidentally selecting the icon text */
}

.button-icons {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--icon-primary); /* Sets the icon color */
  user-select: none; /* Prevents the user from accidentally selecting the icon text */
}
/* --- NEW: Theme Toggle Switch Styles --- */
.theme-toggle-container {
  justify-content: space-around;
  align-items: center;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

/* Hide the default checkbox */
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  transition: 0.4s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  background-color: var(
    --accent-primary
  ); /* The theme's blue for the "on" dot */
}

input:checked + .slider {
  background-color: #ccc; /* A neutral grey for the "on" track */
}

input:checked + .slider:before {
  transform: translateX(24px);
}

body.light-theme .slider:before {
  background-color: var(
    --accent-primary
  ); /* The theme's blue for the "on" dot */
}

/* --- Run Button Transition Styles --- */
.run-button {
  position: relative;
  min-width: 150px; /* Adjust as needed */
}

.run-button .btn-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s 1s;
}

.run-button[data-state="idle"] .idle,
.run-button[data-state="running"] .running {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

#custom-modal code {
  overflow-wrap: break-word;
}

/*
=========================================
--- MOBILE RESPONSIVE STYLES (REBUILT) ---
=========================================
*/
@media (max-width: 800px) {
  /* --- Core Mobile Layout --- */
  html,
  body {
    /* Force the layout to be exactly the size of the screen and prevent all scrolling/zooming */
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden !important;
    position: fixed; /* Lock the body in place */
  }

  .container {
    /* Stack the main panels vertically on mobile */
    flex-direction: column;
    padding: 8px;
    gap: 8px;
  }

  /* --- Panels --- */
  .projects-panel {
    flex: 1 1 40%; /* Let it take up about 40% of the vertical space */
    min-height: 200px;
    width: 100%;
  }

  .projects-panel.collapsed {
    flex-grow: 0; /* Stop it from growing */
    flex-shrink: 0; /* Stop it from shrinking */
    flex-basis: 50px; /* Set its height to the collapsed size */
    min-height: 50px; /* Override the min-height */
  }

  #main-content {
    flex: 1 1 60%; /* Let the editor/console take the remaining 60% */
    min-height: 0; /* Critical flexbox property */
  }

  /* --- Workspace & Toolbar --- */
  #workspace {
    /* On mobile, the workspace is ALWAYS a vertical stack (top/bottom) */
    flex-direction: column;
  }

  #toolbar {
    /* Stack the two toolbar groups vertically, with settings/run on top */
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  #run-and-save-group {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap */
    gap: 8px;
  }

  /* Target the two buttons specifically */
  #run-and-save-group > .run-button,
  #run-and-save-group > .save-button {
    /* Make the two buttons share the first row */
    flex-basis: calc(50% - 4px); /* 50% width minus half the gap */
    flex-grow: 1;
  }

  /* Force the input field to take a full row on its own */
  #run-and-save-group > #project-name-input {
    flex-basis: 100%;
  }

  .toolbar-group {
    justify-content: space-around; /* Space out buttons nicely */
  }

  /* Make the file name input take the full width */
  #project-name-input {
    max-width: 100%;
  }

  /* --- Draggable Divider for Mobile --- */
  #drag-divider {
    /* The divider is now always a horizontal bar on mobile */
    flex-basis: 12px; /* A slightly larger touch target */
    width: 100%;
    height: 12px;
    cursor: row-resize;
    margin: 0;
    background-color: var(--divider-color);
  }

  /* Remove min-width constraints that cause overflow */
  .panel,
  #editor-container,
  #console-container {
    min-width: 0;
  }

  /* Make the action buttons permanently visible on touch screens */
  .node-actions-button {
    visibility: visible;
    opacity: 0.8;
  }
}

/*
=============================================
--- LANDSCAPE MOBILE STYLES (NEW) ---
=============================================
*/
@media (max-height: 500px) and (orientation: landscape) {
  html,
  body {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden !important;
    position: fixed;
  }

  /* Revert container to side-by-side */
  .container {
    flex-direction: row;
  }
  .projects-panel {
    flex: 0 0 250px;
    height: 100%;
    min-height: 0;
  }
  #main-content {
    flex-grow: 1;
  }
  #toolbar {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .toolbar-group {
    justify-content: flex-start;
  }
  #project-name-input {
    max-width: 250px;
  }
  #workspace:not(.horizontal-layout) #drag-divider {
    flex-basis: 8px;
    width: 8px;
    height: auto;
    cursor: col-resize;
    margin: 0 4px;
  }
}

/* --- Terms Notice Styles --- */
.terms-text {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin: 12px 8px 0 8px;
  line-height: 1.5;
}

.terms-text a {
  color: var(--project-color);
  text-decoration: none;
}

.terms-text a:hover {
  text-decoration: underline;
}

.modal-terms-text {
  color: var(--text-secondary);
  text-align: center;
  margin: 12px 8px 0 8px;
  line-height: 1.5;
}

.modal-terms-text a {
  color: var(--accent-primary);
  text-decoration: none;
}

.modal-terms-text a:hover {
  text-decoration: underline;
}

/* Clamp CodeMirror internal elements to viewport */
.CodeMirror {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror-code {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Prevent the hidden measuring DIV from forcing layout scrollbars */
.CodeMirror-measure,
.CodeMirror-measure pre {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.CodeMirror-scroll {
  overflow: auto !important;
  flex: 1;
}