:root {
  --bg: #14151a;
  --panel: #1b1d24;
  --panel-alt: #1f2229;
  --border: #2a2d38;
  --text: #e7e8ee;
  --muted: #8b8fa0;
  --accent: #f2a541;
  --accent-dim: #7a5a26;
  --error: #ef6a5f;
  --waiting: #5b9dd9;
  --done: #59c9a5;

  --font-ui: "Inter", system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* JetBrains Mono ships with ligatures for pairs like "<-", "->", "!=" —
   great for regular code, actively misleading here, since a partially-typed
   or re-rendered "<-" can visually collapse into what looks like a bare "-".
   Disable ligatures everywhere the code font is used so every character
   the user types stays visually distinct and exactly what's in the file. */
.editor, .gutter, .console, .input-field {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

body {
  display: flex;
  flex-direction: column;
}

/* ---- top bar ------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center; /* Changed baseline to center for proper vertical alignment */
  gap: 10px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
}

/* Add img selector here to restrict the actual image */
.brand-mark img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.brand-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin-right: auto;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.15s ease;
}

.status-dot.running {
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
.status-dot.waiting { background: var(--waiting); }
.status-dot.done { background: var(--done); }
.status-dot.error { background: var(--error); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.run-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #1a1300;
  border: none;
  border-radius: 4px;
  padding: 9px 18px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.run-btn:hover:not(:disabled) { filter: brightness(1.08); }

.run-btn:disabled {
  background: var(--accent-dim);
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

.run-icon { font-size: 10px; }

.actions {
  display: flex;
  gap: 8px;
}

.stop-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.stop-btn:hover:not(:disabled) {
  background: var(--error);
  color: #1a0503;
}

.stop-btn:disabled {
  border-color: var(--border);
  color: var(--muted);
  opacity: 0.6;
  cursor: default;
}

/* ---- workspace ------------------------------------------------------- */

.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --split is the editor pane's share of the workspace, set by splitter.js.
   The fallback is the original fixed 1.4 : 1 layout. */
.editor-pane { flex: 0 1 var(--split, 58.33%); }

/* The output pane never gets narrower than its input row needs: the editor
   gives up space instead (it can shrink, see above). Anything that still
   doesn't fit is clipped rather than widening the page. */
.console-pane { flex: 1; min-width: 240px; overflow: hidden; }

/* ---- splitter ------------------------------------------------------- */

/* A 1px line that doubles as the border between the panes. The ::after is an
   invisible, wider grab area; the ::before is the highlight shown on hover,
   focus and while dragging. */
.splitter {
  position: relative;
  z-index: 5; /* keep the grab area above the editor's scrollbar */
  flex: 0 0 1px;
  background: var(--border);
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

.splitter::before,
.splitter::after {
  content: "";
  position: absolute;
}

.splitter::before {
  inset: 0 -1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.splitter::after { inset: 0 -5px; }

.splitter:hover::before,
.splitter:focus-visible::before,
.splitter.dragging::before {
  opacity: 1;
}

/* While dragging, keep the resize cursor everywhere and stop the drag from
   selecting text in the console. */
body.resizing-cols, body.resizing-cols * { cursor: col-resize !important; }
body.resizing-rows, body.resizing-rows * { cursor: row-resize !important; }
body.resizing-cols, body.resizing-rows { user-select: none; }

.pane-header {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ---- editor ------------------------------------------------------- */

.editor-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}

.monaco-host {
  width: 100%;
  height: 100%;
}

.monaco-host .monaco-editor,
.monaco-host .overflow-guard {
  border-radius: 0;
}

/* ---- console ------------------------------------------------------- */

.console {
  flex: 1;
  overflow-y: auto;
  background: var(--panel-alt);
  padding: 14px 16px;
  font-family: var(--font-code);
  font-size: 13.5px;
  line-height: 1.7;
}

.console-line { white-space: pre-wrap; word-break: break-word; }

.console-empty {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
}

.console-line.waiting-marker {
  color: var(--waiting);
}

/* The source line + "^^^^" caret row shown just above an error's
   line-chip/message, pinpointing exactly what the error is about. */
.console-line.error-span {
  margin: 2px 0 0;
  padding: 0;
  font-family: var(--font-code);
  font-variant-ligatures: none;
}

.error-span-code {
  color: var(--text);
}

.error-span-carets {
  color: var(--error);
  font-weight: 600;
}

.console-line.error-line {
  color: var(--error);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.error-line .line-chip {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 3px;
  padding: 1px 6px;
}

.console-line.done-line {
  color: var(--done);
  font-family: var(--font-ui);
  font-size: 12.5px;
  margin-top: 6px;
}

.console-line.stopped-line {
  color: var(--error);
  font-family: var(--font-ui);
  font-size: 12.5px;
  margin-top: 6px;
}

/* ---- input row ------------------------------------------------------- */

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

.input-row.hidden { display: none; }

.input-caret {
  color: var(--waiting);
  font-family: var(--font-code);
}

.input-field {
  flex: 1;
  min-width: 0; /* a text input won't shrink below its default width otherwise */
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-code);
  font-size: 13.5px;
  padding: 7px 10px;
  outline: none;
}

.input-field:focus { border-color: var(--waiting); }

.input-send {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  cursor: pointer;
}

.input-send:hover { border-color: var(--waiting); color: var(--waiting); }

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 760px) {
  .workspace { flex-direction: column; }
  /* The panes stack, so the splitter turns horizontal and sets heights. */
  .pane { min-height: 0; }
  .console-pane { min-width: 0; min-height: 140px; }
  .splitter { cursor: row-resize; }
  .splitter::before { inset: -1px 0; }
  .splitter::after { inset: -5px 0; }
}

/* The assignment operator "<-" drawn as one arrow, in the editor (a Monaco
   inline decoration) and in the error console's source line. The two
   characters are still there, made transparent, so they keep their width and
   the arrow sits exactly on top of them. The stroke matches the "operator"
   color of the editor theme in pseudocode-monaco.js. */
.assign-arrow {
  color: transparent !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23D4D4D4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6H2.5M7.5 1.5 2.5 6l5 4.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}