/* Code mode — local / remote coding chrome */
.layout.code-mode-on .top small,
.layout.code-mode-on .quick-bubbles-wrap,
.layout.code-mode-on #sysDetails {
  display: none !important;
}

#codeIde {
  display: none;
  flex-direction: column;
  background: #1e1e1e;
  color: #d4d4d4;
  border-bottom: 1px solid #2d2d2d;
  min-height: 0;
}

.layout.code-mode-on #codeIde {
  display: flex;
  flex: 1 1 auto;
  min-height: 260px;
  max-height: 58vh;
}

.layout.code-mode-on .messages {
  max-height: 26vh;
  background: #1e1e1e;
  color: #ccc;
}

.layout.code-mode-on .composer {
  background: #252526;
  border-top: 1px solid #333;
}

.layout.code-mode-on .composer textarea,
.layout.code-mode-on .composer-dock {
  background: #252526;
  color: #e0e0e0;
}

.code-ide-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #252526;
  border-bottom: 1px solid #333;
  font-size: 12px;
}
.code-ide-brand { color: #9cdcfe; margin-right: 2px; }
.code-ide-sep { color: #555; }

.code-ide-bar label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #9cdcfe;
}
.code-ide-bar input,
.code-ide-bar select,
.code-ide-bar textarea {
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  color: #d4d4d4;
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 72px;
  font-size: 12px;
}
.code-ide-bar input#codeRemoteHost { min-width: 110px; }
.code-ide-bar input#codeRemotePass { min-width: 100px; }
.code-ide-bar input#codeRemotePort { width: 52px; min-width: 52px; }
.code-ide-bar input#codeRemoteKeyPath { min-width: 120px; }
.code-ide-bar select#codeRemoteAuth { min-width: 72px; }

.code-ide-bar button {
  background: #0e639c;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}
.code-ide-bar button.ghost,
.code-tab-actions button.ghost,
.code-path-bar button.ghost {
  background: transparent;
  border: 1px solid #555;
  color: #ccc;
}
.code-ide-bar .code-remote-status {
  margin-left: auto;
  color: #6a9955;
  font-size: 11px;
  max-width: 42%;
  text-align: right;
}
.code-ide-bar .code-remote-status.err { color: #f48771; }
.code-ide-bar .code-remote-status.warn { color: #cca700; }

.code-ide-keyrow {
  padding: 6px 12px 8px;
  background: #252526;
  border-bottom: 1px solid #333;
}
.code-ide-keyrow label.grow { display: flex; flex-direction: column; gap: 4px; color: #9cdcfe; font-size: 12px; }
.code-ide-keyrow textarea {
  width: 100%;
  box-sizing: border-box;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  color: #d4d4d4;
  border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  resize: vertical;
}

.code-ide-banner {
  display: none;
  padding: 6px 12px;
  font-size: 12px;
  background: #5a3e1b;
  color: #f0e2c0;
  border-bottom: 1px solid #7a5a2b;
}
.code-ide-banner.show { display: block; }
.code-ide-banner.ok { background: #1e3a2f; color: #b7e0c5; border-color: #2d5a45; }
.code-ide-banner.err { background: #5a1e1e; color: #f0c0c0; border-color: #7a2b2b; }

.code-ide-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.code-ide-rail {
  width: 220px;
  flex-shrink: 0;
  background: #252526;
  border-right: 1px solid #333;
  padding: 8px;
  overflow: auto;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.code-rail-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.code-rail-head h4 {
  margin: 0;
  font-size: 11px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1;
}
.code-rail-head select {
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  color: #ccc;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
}
.code-path-bar {
  display: flex;
  gap: 4px;
  align-items: center;
}
.code-path-bar input {
  flex: 1;
  min-width: 0;
  background: #1e1e1e;
  border: 1px solid #3c3c3c;
  color: #d4d4d4;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
}
.code-path-bar button {
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
}
.code-ide-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1;
}
.code-ide-rail li {
  padding: 4px 6px;
  border-radius: 3px;
  color: #ccc;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.code-ide-rail li:hover { background: #2a2d2e; }
.code-ide-rail li.dir { color: #9cdcfe; }
.code-ide-rail li.file { color: #ce9178; }
.code-ide-rail li.on { background: #094771; color: #fff; }
.code-ide-rail li.muted { color: #888; cursor: default; }

.code-ide-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #1e1e1e;
}
.code-tab-row {
  display: flex;
  align-items: center;
  background: #2d2d2d;
  border-bottom: 1px solid #333;
  gap: 8px;
  padding-right: 8px;
}
.code-ide-editor .code-tab {
  padding: 6px 12px;
  font-size: 12px;
  color: #9cdcfe;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.code-tab-actions { display: flex; gap: 6px; }
.code-tab-actions button {
  background: #0e639c;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px;
}

#codeEditorBuf {
  flex: 1;
  width: 100%;
  border: 0;
  resize: none;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  padding: 12px;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 2;
}

.code-ide-hint {
  padding: 4px 12px 8px;
  font-size: 11px;
  color: #888;
}

@media (max-width: 820px) {
  .layout.code-mode-on #codeIde { max-height: 50vh; min-height: 200px; }
  .code-ide-rail { width: 150px; }
  .code-ide-bar .code-key-path { display: none; }
  .code-ide-bar .code-remote-status { max-width: 100%; margin-left: 0; text-align: left; }
}