/* static/css/ide_layout.css */

/* Kill accidental horizontal page scroll */
html, body { overflow-x: hidden; }

/* Optional: a knob you can tune in base.html */
:root{
  --gutter: 10px;
  --panel-border: rgba(107, 114, 128, 0.16);
  --panel-bg: rgba(255, 255, 255, 0.85);
  --panel-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  --panel-backdrop: blur(12px);
  --active-glow: 0 0 15px rgba(16, 185, 129, 0.4);
  --running-border: #10b981;
}

[data-theme="dark"]{
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-bg: rgba(18, 20, 24, 0.85);
  --panel-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --panel-backdrop: blur(12px);
}

[data-theme="retro"]{
  --panel-border: #425c42;
  --panel-bg: #0c0e12;
  --panel-shadow: 0 0 15px rgba(51, 255, 51, 0.15);
  --panel-backdrop: none;
  --active-glow: 0 0 15px rgba(51, 255, 51, 0.5);
  --running-border: #33ff33;
  --bg: #121417;
  --text: #33ff33;
}

/* The IDE is a fixed-height container; scrolling happens inside panes */
.ide{
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--panel-bg);
  backdrop-filter: var(--panel-backdrop);
  -webkit-backdrop-filter: var(--panel-backdrop);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  display: flex;
  align-items: stretch;
  min-height: 320px;
}

/* Neon running state glow */
.ide.ide-running {
  border-color: var(--running-border) !important;
  box-shadow: var(--panel-shadow), var(--active-glow) !important;
  animation: ide-pulse 2s infinite ease-in-out;
}

@keyframes ide-pulse {
  0% { box-shadow: var(--panel-shadow), 0 0 8px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: var(--panel-shadow), 0 0 20px rgba(16, 185, 129, 0.5); }
  100% { box-shadow: var(--panel-shadow), 0 0 8px rgba(16, 185, 129, 0.2); }
}

/* SplitPanes.js sets an explicit height; this keeps flex math sane */
.ide.fit-viewport{
  min-height: 0 !important;
}

/* Common pane rules */
.ide .pane{
  min-width: 0;
  min-height: 0;
}

/* Left (prompt/steps) */
.pane-left{
  width: 380px;
  max-width: 55%;
  overflow: auto;              /* <-- critical: prompt can scroll */
  background: var(--panel-bg);
}

/* Right column (editor on top, output on bottom) */
.pane-right{
  flex: 1;
  display: flex;               /* <-- critical: stack top/bottom */
  flex-direction: column;
  overflow: hidden;            /* <-- keep scroll inside children */
  min-width: 0;
  min-height: 0;
}

/* Top (editor) and bottom (output) share the fixed right-column height */
#paneTop{
  flex: 2 1 0;                 /* default: 2/3 */
  overflow: hidden;
  min-height: 180px;
}
#paneBottom{
  flex: 1 1 0;                 /* default: 1/3 */
  overflow: hidden;
  min-height: 160px;
}

/* Gutters */
.gutter-h{
  width: var(--gutter);
  cursor: col-resize;
  background: rgba(0,0,0,.03);
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  transition: background-color 0.25s ease;
}
.gutter-h:hover{
  background: rgba(16, 185, 129, 0.12) !important;
}

.gutter-v{
  height: var(--gutter);
  cursor: row-resize;
  background: rgba(0,0,0,.03);
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  transition: background-color 0.25s ease;
}
.gutter-v:hover{
  background: rgba(16, 185, 129, 0.12) !important;
}

/* Make py panels fill their pane so output never gets pushed off-screen */
.py-panel{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* CodeMirror must be allowed to scroll internally */
.CodeMirror{
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
  font-family: "JetBrains Mono", "Fira Code", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  border-radius: 8px;
}

/* Output must scroll internally */
.py-out{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  font-family: "JetBrains Mono", "Fira Code", "Roboto Mono", ui-monospace, monospace !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

/* Mobile: stack left above right */
@media (max-width: 980px){
  .ide{ flex-direction: column; }
  .pane-left{
    width: auto;
    max-width: none;
    border-bottom: 1px solid var(--panel-border);
  }
  .gutter-h{ display: none; }
}

/* --- Dark/light safe defaults for the description pane (left) --- */
.pane-left,
.pane-left .prompt,
.pane-left .doc {
  background: var(--panel-bg);
  color: var(--panel-text);
}

.pane-left .muted { color: var(--muted-text, rgba(127,127,127,.95)); }

/* Code blocks inside the description */
.pane-left .doc pre{
  background: var(--code-bg, rgba(127,127,127,.08));
  border: 1px solid var(--panel-border, #d0d7de);
  color: var(--panel-text);
}
.pane-left .doc code{
  background: var(--code-inline-bg, rgba(127,127,127,.12));
  color: var(--panel-text);
}

/* Submit box in the left pane */
.pane-left .submit-box{
  background: var(--warn-bg, rgba(255,165,0,.06));
  border-color: var(--warn-border, rgba(255,140,0,.45));
  color: var(--panel-text);
}




/* Shared inner IDE shell used by sandbox / lecture / homework */
.ide-shell{
  --filepane-w: 220px;
  display:grid;
  grid-template-columns: var(--filepane-w) 10px minmax(0,1fr);
  min-height: 0;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel-bg);
}

.filepane,
.editorpane{
  min-width:0;
  min-height:0;
}

.editorpane{
  display:flex;
  flex-direction:column;
  padding:12px;
}

.filepane-gutter{
  cursor: col-resize;
  background: rgba(0,0,0,.04);
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
}

.ide-shell.filepane-collapsed{
  grid-template-columns: 0 0 minmax(0,1fr);
}

.ide-shell.filepane-collapsed .filepane,
.ide-shell.filepane-collapsed .filepane-gutter{
  overflow:hidden;
  border:0;
}

@media (max-width: 900px){
  .ide-shell{
    grid-template-columns: 1fr;
  }
  .filepane-gutter{
    display:none;
  }
  .ide-shell.filepane-collapsed{
    grid-template-columns: 1fr;
  }
}

/* --- Viewport scaling and confinement for IDE pages --- */
body.ide-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.ide-page #siteWrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 16px 12px 16px !important;
  box-sizing: border-box;
}

body.ide-page .ide-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ide.fit-viewport {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100%;
}

/* Ensure interactive terminal containers fill remaining vertical space without overflowing */
.terminal-container,
#lectureTerminalContainer,
#hwTerminalContainer,
#lessonTerminalContainer,
#terminalContainer {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.xterm {
  height: 100% !important;
  width: 100% !important;
}

.xterm .xterm-viewport {
  overflow-y: auto !important;
}

/* ── Shared toolbar action buttons ─────────────────────────────────── */
.toolbar-action-btn {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.4rem 0.8rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.toolbar-btn-run {
  color: #10b981 !important;
}
.toolbar-btn-run:hover {
  background: rgba(16, 185, 129, 0.08) !important;
}
.toolbar-btn-run:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.toolbar-btn-debug {
  color: #f59e0b !important;
}
.toolbar-btn-debug:hover {
  background: rgba(245, 158, 11, 0.08) !important;
}

/* ── Command preview pill ─────────────────────────────────────────── */
.cmd-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8rem;
  color: var(--muted-text, #6b7280);
  background: var(--code-bg, rgba(0,0,0,0.04));
  border: 1px solid var(--panel-border, #d0d7de);
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.cmd-preview .cmd-dollar { color: #10b981; font-weight: 700; }
.cmd-preview .cmd-kw { color: #3b82f6; }
:root[data-theme="dark"] .cmd-preview { background: rgba(255,255,255,0.04); }
[data-theme="retro"] .cmd-preview {
  background: rgba(51,255,51,0.05) !important;
  border-color: #425c42 !important;
  color: #5f7560 !important;
}
[data-theme="retro"] .cmd-preview .cmd-dollar { color: #33ff33 !important; }
[data-theme="retro"] .cmd-preview .cmd-kw { color: #85e385 !important; }

/* Toolbar args wrapper: pill + input */
#argsBoxWrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 360px;
}