/* ── Fix_Flow IDE Stylesheet ─────────────────────────────────────────────── */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --bg-dark:       #1e1e2e;
  --bg-panel:      #252535;
  --bg-panel2:     #2a2a3e;
  --bg-editor:     #282a36;
  --bg-toolbar:    #1a1a2a;
  --bg-statusbar:  #181828;
  --bg-header:     #1e1e2e;
  --border:        #3a3a5a;
  --border-light:  #45455f;
  --text:          #cdd6f4;
  --text-muted:    #7f849c;
  --text-dim:      #585b70;
  --accent-blue:   #89b4fa;
  --accent-green:  #a6e3a1;
  --accent-red:    #f38ba8;
  --accent-yellow: #f9e2af;
  --accent-orange: #fab387;
  --accent-purple: #cba6f7;
  --accent-teal:   #94e2d5;
  --btn-primary:   #89b4fa;
  --btn-run:       #a6e3a1;
  --btn-debug:     #cba6f7;
  --btn-analyze:   #89dceb;
  --radius:        6px;
  --font-mono:     'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
  --font-ui:       -apple-system, 'Segoe UI', system-ui, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 13px;
  background: var(--bg-dark);
  color: var(--text);
}

/* ── Top Bar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-center { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-blue);
  letter-spacing: 0.5px;
}
.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 10px;
}

.lang-selector-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}
.lang-selector-wrap select {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.lang-selector-wrap select:focus {
  border-color: var(--accent-blue);
}
#filename-input {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  width: 140px;
  outline: none;
}
#filename-input:focus { border-color: var(--accent-blue); }

/* ── Bob status badge ────────────────────────────────────────────────────── */
.badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge-checking { color: var(--text-muted); border-color: var(--border); }
.badge-available { color: var(--accent-green); border-color: var(--accent-green); }
.badge-unavailable { color: var(--accent-yellow); border-color: var(--accent-yellow); }

/* ── Main Layout ─────────────────────────────────────────────────────────── */
.main-layout {
  display: flex;
  height: calc(100vh - 40px - 24px); /* full - topbar - statusbar */
  overflow: hidden;
}

/* ── File Explorer ───────────────────────────────────────────────────────── */
.file-explorer {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-header.collapsible { cursor: pointer; user-select: none; }
.panel-header.collapsible:hover { background: var(--bg-panel2); }
.collapse-arrow { margin-left: auto; transition: transform 0.2s; }
.panel-header.collapsed .collapse-arrow { transform: rotate(-90deg); }

.file-list {
  list-style: none;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}
.file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.file-item:hover { background: var(--bg-panel2); color: var(--text); }
.file-item.active { background: rgba(137, 180, 250, 0.12); color: var(--accent-blue); }
.file-icon { font-size: 13px; }

.explorer-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
}
.btn-new-file {
  width: 100%;
  padding: 4px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.btn-new-file:hover {
  background: var(--bg-panel2);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

/* ── Editor Section ──────────────────────────────────────────────────────── */
.editor-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.toolbar-spacer { flex: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  padding: 5px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-run {
  background: rgba(166,227,161,0.15);
  color: var(--btn-run);
  border-color: var(--btn-run);
}
.btn-run:hover:not(:disabled) { background: rgba(166,227,161,0.28); }

.btn-analyze {
  background: rgba(137,220,235,0.12);
  color: var(--btn-analyze);
  border-color: var(--btn-analyze);
}
.btn-analyze:hover:not(:disabled) { background: rgba(137,220,235,0.25); }

.btn-debug {
  background: rgba(203,166,247,0.15);
  color: var(--btn-debug);
  border-color: var(--btn-debug);
}
.btn-debug:hover:not(:disabled) { background: rgba(203,166,247,0.28); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border-light); }

.btn-apply-fix {
  background: rgba(166,227,161,0.15);
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.btn-apply-fix:hover:not(:disabled) { background: rgba(166,227,161,0.28); }

.btn-keep-original {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-keep-original:hover:not(:disabled) { color: var(--text); border-color: var(--border-light); }

/* ── Editor Wrap ─────────────────────────────────────────────────────────── */
.editor-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#editor-mount { width: 100%; height: 100%; }

/* Override CodeMirror theme */
.CodeMirror {
  height: 100% !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  background: var(--bg-editor) !important;
  color: #f8f8f2 !important;
}
.CodeMirror-scroll { height: 100%; }
.CodeMirror-gutters {
  background: var(--bg-editor) !important;
  border-right: 1px solid var(--border) !important;
}
.CodeMirror-linenumber { color: var(--text-dim) !important; }
.CodeMirror-activeline-background { background: rgba(255,255,255,0.04) !important; }

/* ── Correction Banner ────────────────────────────────────────────────────  */
.correction-banner {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel2);
  border: 1px solid var(--accent-yellow);
  border-radius: var(--radius);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  max-width: 90%;
}
.correction-icon { font-size: 14px; }
.btn-correction-apply {
  padding: 2px 10px;
  background: rgba(249,226,175,0.15);
  color: var(--accent-yellow);
  border: 1px solid var(--accent-yellow);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}
.btn-correction-apply:hover { background: rgba(249,226,175,0.28); }
.btn-correction-dismiss {
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
}
.btn-correction-dismiss:hover { color: var(--text); }

/* ── Output Panel ────────────────────────────────────────────────────────── */
.output-panel {
  height: 160px;
  flex-shrink: 0;
  background: var(--bg-toolbar);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.output-header {
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.output-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}
.output-error { color: var(--accent-red); }
.output-success { color: var(--accent-green); }

.run-status {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
}
.run-status.success { background: rgba(166,227,161,0.15); color: var(--accent-green); }
.run-status.error   { background: rgba(243,139,168,0.15); color: var(--accent-red); }
.run-status.timeout { background: rgba(249,226,175,0.15); color: var(--accent-yellow); }
.run-status.running { background: rgba(137,180,250,0.15); color: var(--accent-blue); }

/* ── Right Workflow Panel ────────────────────────────────────────────────── */
.workflow-panel {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-panel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.panel-section {
  border-bottom: 1px solid var(--border);
}
.panel-body {
  padding: 8px 10px;
  font-size: 12px;
}
.placeholder-text {
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
  line-height: 1.5;
}
.placeholder-text strong { color: var(--text-dim); font-style: normal; }

/* ── Workflow Steps ──────────────────────────────────────────────────────── */
.workflow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.workflow-step:hover { background: var(--bg-panel2); }
.step-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.step-label { flex: 1; color: var(--text-muted); font-size: 12px; }
.step-status { font-size: 10px; font-weight: 600; flex-shrink: 0; }

/* Step states */
.workflow-step.pending .step-label  { color: var(--text-dim); }
.workflow-step.running .step-icon   { animation: spin 1s linear infinite; }
.workflow-step.running .step-label  { color: var(--accent-blue); }
.workflow-step.done .step-label     { color: var(--text); }
.workflow-step.done .step-icon      { }
.workflow-step.error .step-label    { color: var(--accent-red); }
.workflow-step.skipped .step-label  { color: var(--text-dim); text-decoration: line-through; }

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

/* ── Analysis Results ────────────────────────────────────────────────────── */
.issue-item {
  display: flex;
  flex-direction: column;
  padding: 5px 6px;
  margin: 3px 0;
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
  background: var(--bg-panel2);
}
.issue-item.error   { border-left-color: var(--accent-red); }
.issue-item.warning { border-left-color: var(--accent-yellow); }
.issue-item.info    { border-left-color: var(--accent-blue); }
.issue-title {
  font-weight: 600;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.issue-title .line-badge {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 10px;
  background: var(--bg-panel);
  padding: 0 5px;
  border-radius: 3px;
}
.issue-msg { color: var(--text-muted); font-size: 11px; margin-top: 2px; }

.analysis-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.count-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.count-error   { background: rgba(243,139,168,0.15); color: var(--accent-red); }
.count-warning { background: rgba(249,226,175,0.15); color: var(--accent-yellow); }
.count-ok      { background: rgba(166,227,161,0.15); color: var(--accent-green); }

/* ── Test Results ────────────────────────────────────────────────────────── */
.test-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.test-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 6px;
  margin: 3px 0;
  border-radius: var(--radius);
  background: var(--bg-panel2);
  border-left: 3px solid var(--border);
}
.test-item.pass  { border-left-color: var(--accent-green); }
.test-item.fail  { border-left-color: var(--accent-red); }
.test-item.skip  { border-left-color: var(--text-dim); }
.test-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.test-info { flex: 1; min-width: 0; }
.test-name { font-weight: 600; font-size: 11px; word-break: break-word; }
.test-desc { color: var(--text-muted); font-size: 10px; margin-top: 1px; }
.test-error { color: var(--accent-red); font-size: 10px; margin-top: 3px; font-family: var(--font-mono); }

/* ── Diff / Fix View ─────────────────────────────────────────────────────── */
.fix-meta {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: var(--bg-panel2);
  border-radius: var(--radius);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.fix-meta strong { color: var(--text); }
.diff-container {
  background: var(--bg-editor);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.diff-added   { background: rgba(166,227,161,0.12); color: var(--accent-green); display: block; }
.diff-removed { background: rgba(243,139,168,0.12); color: var(--accent-red);   display: block; text-decoration: line-through; }
.diff-context { color: var(--text-dim); display: block; }
.diff-header  { color: var(--accent-blue); display: block; font-weight: 700; margin: 3px 0; }

.fix-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fix-actions .btn { flex: 1; justify-content: center; }

/* ── Verification Result ─────────────────────────────────────────────────── */
.verdict-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
}
.verdict-PASS {
  background: rgba(166,227,161,0.15);
  color: var(--accent-green);
  border: 2px solid var(--accent-green);
}
.verdict-FAIL {
  background: rgba(243,139,168,0.15);
  color: var(--accent-red);
  border: 2px solid var(--accent-red);
}
.verdict-detail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}
.verdict-detail strong { color: var(--text); }
.verdict-issues { margin-top: 4px; }
.verdict-issue-item {
  padding: 3px 6px;
  margin: 2px 0;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
}
.verdict-resolved { background: rgba(166,227,161,0.1); color: var(--accent-green); }
.verdict-remaining { background: rgba(243,139,168,0.1); color: var(--accent-red); }

/* ── Status Bar ──────────────────────────────────────────────────────────── */
.statusbar {
  height: 24px;
  background: var(--accent-blue);
  color: var(--bg-dark);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  z-index: 100;
}
.statusbar-sep {
  margin: 0 8px;
  opacity: 0.5;
}
#statusbar-message { margin-left: auto; color: var(--bg-dark); opacity: 0.85; }

/* ── Modal (Optimization) ────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.modal-dialog {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: var(--accent-purple);
  font-size: 13px;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
}
.modal-close:hover { color: var(--text); }
.modal-body {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.opt-section { margin-bottom: 12px; }
.opt-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.opt-code {
  background: var(--bg-editor);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
}
.opt-suggested { border-color: var(--accent-purple); }
.btn-apply-opt {
  background: rgba(203,166,247,0.15);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}
.btn-apply-opt:hover { background: rgba(203,166,247,0.28); }
.btn-keep-opt {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-keep-opt:hover { color: var(--text); border-color: var(--border-light); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Bob workflow results text ───────────────────────────────────────────── */
.bob-result-section {
  margin-bottom: 8px;
}
.bob-result-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.bob-result-text {
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}
.bob-result-text.mono { font-family: var(--font-mono); }
.bob-unavailable-note {
  background: rgba(249,226,175,0.08);
  border: 1px solid rgba(249,226,175,0.3);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 10px;
  color: var(--accent-yellow);
  margin-top: 4px;
}

/* ── Responsive shrink for narrow viewports ──────────────────────────────── */
@media (max-width: 900px) {
  .file-explorer { display: none; }
  .workflow-panel { width: 260px; }
}
@media (max-width: 700px) {
  .workflow-panel { display: none; }
}