/* Мини-редактор кода (`.code-playground`).
   Одна разметка на два хоста: динамическая вкладка кабинета и секция
   «Программирование» панели ассистента.

   Числа хрома (250px, рамка, оверлеи) совпадают с блоком
   `.programming-task` в `content_blocks_overrides.css`. Кабинетная
   вкладка тот файл не грузит — поэтому хром живёт здесь. */

.code-playground {
  gap: var(--ui-space-2, 8px);
  min-width: 0;
}

.code-playground--tab {
  height: 100%;
}

.cp-lang-select {
  width: auto;
}

.code-playground .editor-wrapper,
.code-playground .cp-editor-wrapper {
  position: relative;
  width: 100%;
  min-width: 0;
}

.code-playground .monaco-editor-loading,
.code-playground .monaco-editor-not-loaded {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  margin-bottom: 0.5rem;
  background-color: var(--ui-surface-muted);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
}

.code-playground .programming-editor-spinner {
  width: 3rem;
  height: 3rem;
}

.code-playground .programming-editor-load-icon {
  margin-right: 8px;
  vertical-align: -2px;
}

.code-playground .monaco-editor-container {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-sm);
}

.code-playground--tab .monaco-editor-container {
  min-height: 360px;
}

.code-playground .programming-plain-editor,
.code-playground .cp-plain-editor {
  width: 100%;
  min-width: 0;
  min-height: 250px;
  resize: vertical;
  font-family: monospace;
  white-space: pre;
  tab-size: 4;
  overflow-x: auto;
}

/* После mount JS прячет запасное поле, пока Monaco не готов — как
   `data-pt-bootstrapped` у блока «Программирование». */
.code-playground[data-cp-bootstrapped="true"] .programming-plain-editor,
.code-playground[data-cp-bootstrapped="true"] .cp-plain-editor,
.code-playground[data-cp-bootstrapped="true"] [data-pt-fallback-help],
.code-playground[data-cp-bootstrapped="true"] .monaco-editor-not-loaded {
  display: none !important;
}

.code-playground[data-cp-editor-ready="true"] .programming-plain-editor,
.code-playground[data-cp-editor-ready="true"] .cp-plain-editor,
.code-playground[data-cp-editor-ready="true"] [data-pt-fallback-help],
.code-playground[data-cp-editor-ready="true"] .monaco-editor-not-loaded,
.code-playground[data-cp-editor-ready="true"] .monaco-editor-loading {
  display: none !important;
}

.code-playground .cp-io-card {
  min-width: 0;
}

.code-playground .cp-output-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  justify-content: space-between;
  min-width: 0;
}

.code-playground .cp-output-header .ui-label {
  flex: 1 1 14rem;
  min-width: min(100%, 14rem);
}

.code-playground .programming-custom-input,
.code-playground .cp-stdin-input {
  min-height: 120px;
  white-space: pre-wrap;
  font-family: monospace;
}

.code-playground .programming-output,
.code-playground .cp-output {
  min-height: 140px;
  max-height: 320px;
  margin-bottom: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
}

.cp-output-error {
  color: var(--ui-color-danger);
}

.cp-output-muted {
  color: var(--ui-text-secondary);
  font-style: italic;
}