/* ── VIBE CODE ─────────────────────────────────────────────────────────────── */
#vibe-view { display:none; flex:1; overflow:hidden; }
#vibe-view.visible { display:flex; }

.vibe-layout {
  display:flex; flex:1; height:100%; overflow:hidden;
  background:#0a0a0a; gap:0;
}

/* Sidebar */
.vibe-sidebar {
  width:220px; min-width:160px; max-width:260px;
  border-right:1px solid #1e1e1e;
  display:flex; flex-direction:column;
  background:#0d0d0d; flex-shrink:0;
}
.vibe-sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 8px; border-bottom:1px solid #1e1e1e;
}
.vibe-sidebar-title { font-size:11px; font-weight:600; color:#555; text-transform:uppercase; letter-spacing:0.5px; }
.vibe-sidebar-refresh { background:none; border:none; color:#555; cursor:pointer; font-size:14px; padding:2px 4px; }
.vibe-sidebar-refresh:hover { color:#2774AE; }
.vibe-file-tree { flex:1; overflow-y:auto; padding:6px 0; }
.vibe-tree-list { list-style:none; margin:0; padding:0; }
.vibe-tree-dir { padding:0; }
.vibe-dir-label {
  display:block; font-size:12px; color:#737373; padding:4px 12px;
  cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vibe-dir-label:hover { color:#d4d4d4; background:#161616; }
.vibe-dir-children { padding-left:12px; }
.vibe-dir-children.collapsed { display:none; }
.vibe-tree-file {
  display:flex; align-items:center; gap:6px;
  padding:4px 12px; cursor:pointer; font-size:12px;
}
.vibe-tree-file:hover { background:#161616; }
.vibe-file-icon { font-size:11px; flex-shrink:0; }
.vibe-file-name { flex:1; color:#d4d4d4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vibe-file-size { font-size:10px; color:#444; flex-shrink:0; }
.vibe-loading { font-size:12px; color:#555; padding:12px; }
.vibe-tree-error { font-size:12px; color:#ef4444; padding:12px; }

/* Main */
.vibe-main {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; min-width:0;
}
.vibe-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #1e1e1e; flex-shrink:0;
}
.vibe-header-left { display:flex; flex-direction:column; gap:2px; }
.vibe-title { font-size:15px; font-weight:700; color:#2774AE; }
.vibe-subtitle { font-size:11px; color:#555; }
.vibe-clear-btn {
  font-size:11px; color:#555; background:none;
  border:1px solid #2a2a2a; border-radius:6px; padding:4px 10px; cursor:pointer;
}
.vibe-clear-btn:hover { color:#d4d4d4; border-color:#444; }

/* Messages */
.vibe-messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
}
.vibe-welcome {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:40px 20px; gap:12px; margin:auto;
}
.vibe-welcome-icon { font-size:36px; }
.vibe-welcome-title { font-size:18px; font-weight:700; color:#d4d4d4; }
.vibe-welcome-sub { font-size:13px; color:#555; max-width:380px; line-height:1.5; }
.vibe-welcome-examples { display:flex; flex-direction:column; gap:6px; margin-top:8px; width:100%; max-width:360px; }
.vibe-example {
  background:#111; border:1px solid #2a2a2a; border-radius:8px;
  color:#737373; font-size:12px; padding:8px 12px; cursor:pointer; text-align:left;
}
.vibe-example:hover { border-color:#2774AE; color:#d4d4d4; }

/* Bubbles */
.vibe-bubble { display:flex; flex-direction:column; gap:6px; max-width:100%; }
.vibe-bubble-user {
  align-self:flex-end;
  background:#1a1a1a; border:1px solid #2a2a2a;
  border-radius:12px 12px 2px 12px;
  padding:10px 14px; max-width:80%;
}
.vibe-bubble-user .vibe-bubble-content { font-size:13px; color:#d4d4d4; white-space:pre-wrap; }
.vibe-bubble-ai { align-self:flex-start; width:100%; }
.vibe-bubble-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.vibe-bubble-label { font-size:11px; font-weight:700; color:#2774AE; }
.vibe-deep-check-badge { font-size:11px; color:#555; }
.vibe-bubble-content {
  font-size:13px; color:#d4d4d4; line-height:1.6;
  background:#111; border:1px solid #1e1e1e; border-radius:10px; padding:12px 14px;
}
.vibe-bubble-content p { margin:0 0 8px; }
.vibe-bubble-content p:last-child { margin:0; }
.vibe-bubble-content pre { background:#0a0a0a; border:1px solid #2a2a2a; border-radius:6px; padding:10px; overflow-x:auto; margin:8px 0; }
.vibe-bubble-content code { font-family:monospace; font-size:12px; }
.vibe-bubble-content :not(pre) > code { background:#1e1e1e; padding:2px 5px; border-radius:3px; color:#4ec9b0; }

/* Input */
.vibe-input-row {
  display:flex; gap:8px; align-items:flex-end;
  padding:12px 16px 8px; border-top:1px solid #1e1e1e; flex-shrink:0;
}
.vibe-input {
  flex:1; background:#111; border:1px solid #2a2a2a; border-radius:10px;
  color:#d4d4d4; font-size:14px; padding:10px 12px;
  resize:none; font-family:inherit; min-height:40px; max-height:160px;
  outline:none;
}
.vibe-input:focus { border-color:#2774AE; }
.vibe-send-btn {
  background:#2774AE; color:#000; border:none; border-radius:10px;
  padding:10px 18px; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0;
}
.vibe-send-btn:disabled { opacity:0.4; cursor:not-allowed; }
.vibe-send-btn:hover:not(:disabled) { background:#ffe033; }
.vibe-input-hint { font-size:11px; color:#333; padding:0 16px 10px; flex-shrink:0; }

/* Work Order */
.vibe-work-order-slot { margin-top:8px; }
.vibe-work-order {
  background:#111; border:1px solid #f97316;
  border-radius:10px; padding:14px;
}
.wo-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:4px; }
.wo-title { font-size:13px; font-weight:700; color:#f97316; }
.wo-subtitle { font-size:11px; color:#555; }
.wo-section { margin-bottom:10px; }
.wo-section-label { font-size:10px; font-weight:700; color:#444; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.wo-file { display:flex; align-items:center; gap:6px; padding:4px 0; font-size:12px; color:#d4d4d4; }
.wo-file-path { flex:1; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wo-file-action { font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; flex-shrink:0; }
.wo-file-action.edit { background:rgba(249,115,22,0.15); color:#f97316; }
.wo-file-action.create { background:rgba(34,197,94,0.15); color:#22c55e; }
.wo-file-action.delete { background:rgba(239,68,68,0.15); color:#ef4444; }
.wo-cmd { display:flex; align-items:center; gap:6px; padding:3px 0; font-size:12px; color:#d4d4d4; }
.wo-cmd-icon { color:#555; font-family:monospace; }
.wo-cmd code { font-family:monospace; color:#4ec9b0; }
.wo-actions { display:flex; gap:8px; margin-top:12px; }
.wo-run-btn {
  background:#f97316; color:#000; border:none; border-radius:8px;
  padding:10px 20px; font-size:14px; font-weight:700; cursor:pointer; flex:1;
}
.wo-run-btn:disabled { opacity:0.5; cursor:not-allowed; }
.wo-run-btn:hover:not(:disabled) { background:#fb923c; }
.wo-cancel-btn {
  background:#1c1c1c; color:#555; border:1px solid #2a2a2a;
  border-radius:8px; padding:10px 16px; font-size:13px; cursor:pointer;
}
.wo-cancel-btn:hover { color:#d4d4d4; }
.wo-output { margin-top:10px; background:#0a0a0a; border-radius:6px; padding:10px; max-height:220px; overflow-y:auto; }
.wo-out-pre { font-family:monospace; font-size:11px; color:#d4d4d4; white-space:pre-wrap; word-break:break-all; margin:0; }
.wo-out-ok { color:#22c55e; }
.wo-out-err { color:#ef4444; }
.wo-out-warn { color:#f97316; }
.wo-out-cmd { color:#2774AE; }
.wo-autofix-btn {
  display:block; margin-top:8px; background:#1a1a2e; border:1px solid #f97316;
  color:#f97316; border-radius:6px; padding:6px 12px; font-size:12px; cursor:pointer;
}
.wo-autofix-btn:hover { background:#2a1a0e; }

/* File Preview */
.vibe-preview {
  width:0; overflow:hidden; transition:width 0.2s ease;
  border-left:1px solid #1e1e1e; background:#0d0d0d;
  display:flex; flex-direction:column; flex-shrink:0;
}
.vibe-preview.open { width:320px; }
.vibe-preview-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #1e1e1e; flex-shrink:0;
}
.vibe-preview-title { font-size:11px; color:#737373; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.vibe-preview-close { background:none; border:none; color:#555; cursor:pointer; font-size:14px; padding:2px 4px; flex-shrink:0; }
.vibe-preview-close:hover { color:#d4d4d4; }
.vibe-preview-body { flex:1; overflow:auto; }
.vibe-preview-code {
  font-family:monospace; font-size:11px; color:#d4d4d4;
  line-height:1.6; margin:0; padding:10px 0; white-space:pre;
}
.vibe-line { display:block; padding:0 10px; }
.vibe-line:hover { background:#161616; }
.vibe-line-no { color:#444; user-select:none; margin-right:12px; display:inline-block; min-width:32px; text-align:right; }

/* Mobile overrides */
@media (max-width: 640px) {
  .vibe-sidebar { display:none; }
  .vibe-preview { display:none; }
  .vibe-bubble-user { max-width:95%; }
}
/* ══════════════════════════════════════════════════════════════════════════════
   VIBE CODE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────────────────────── */
#vibe-view { flex:1; overflow:hidden; display:none; flex-direction:column }
#vibe-view.visible { display:flex }

.vibe-layout {
  display: grid;
  grid-template-columns: 220px 1fr 340px;
  height: 100%;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.vibe-sidebar {
  background: #111;
  border-right: 1px solid #222;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vibe-sidebar-header {
  padding: 10px 12px;
  border-bottom: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.vibe-sidebar-title { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .5px }
.vibe-file-tree { flex: 1; overflow-y: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent }
.vibe-loading { padding: 12px 14px; font-size: 12px; color: #444 }
.vibe-tree-error { padding: 12px 14px; font-size: 12px; color: #E24B4A }
.vibe-tree-list { list-style: none; padding: 0; margin: 0 }
.vibe-tree-dir { padding: 0 }
.vibe-dir-label {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; cursor: pointer; font-size: 12px; color: #666;
  transition: background .1s, color .1s; user-select: none;
}
.vibe-dir-label:hover { background: #1a1a1a; color: #ccc }
.vibe-dir-arrow { font-size: 9px; color: #444; flex-shrink: 0; transition: transform .15s }
.vibe-dir-children { padding-left: 12px }
.vibe-dir-children.collapsed { display: none }
.vibe-tree-file {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; cursor: pointer; font-size: 12px; color: #666;
  transition: background .1s, color .1s;
}
.vibe-tree-file:hover { background: #1a1a1a; color: #ccc }
.vibe-tree-file.active { background: #1e1200; color: #FFD100 }
.vibe-file-icon { font-size: 12px; flex-shrink: 0 }
.vibe-file-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.vibe-file-size { font-size: 10px; color: #3a3a3a; flex-shrink: 0; font-family: monospace }

/* ── Main (chat) column ─────────────────────────────────────────────────────── */
.vibe-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #222;
}

.vibe-header {
  padding: 10px 16px;
  border-bottom: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #0f0f0f;
}
.vibe-header-left { display: flex; flex-direction: column; gap: 2px }
.vibe-title { font-size: 14px; font-weight: 700; color: #FFD100 }
.vibe-subtitle { font-size: 11px; color: #444 }
.vibe-header-right { display: flex; align-items: center; gap: 8px }

.vibe-icon-btn {
  background: none; border: 1px solid #2a2a2a; border-radius: 6px;
  color: #555; font-size: 12px; padding: 4px 8px; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.vibe-icon-btn:hover { border-color: #FFD100; color: #FFD100 }
.vibe-clear-btn {
  background: none; border: 1px solid #2a2a2a; border-radius: 6px;
  color: #555; font-size: 12px; padding: 5px 10px; cursor: pointer; transition: all .15s;
}
.vibe-clear-btn:hover { border-color: #E24B4A; color: #E24B4A }

.vibe-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent;
}

/* ── Welcome screen ─────────────────────────────────────────────────────────── */
.vibe-welcome {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 40px 20px; gap: 12px; margin: auto 0;
}
.vibe-welcome-icon { font-size: 32px }
.vibe-welcome-title { font-size: 18px; font-weight: 600; color: #e0e0e0 }
.vibe-welcome-sub { font-size: 13px; color: #555; max-width: 380px; line-height: 1.6 }
.vibe-welcome-examples { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-top: 8px }
.vibe-example {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px;
  padding: 10px 14px; cursor: pointer; font-size: 12px; color: #888;
  text-align: left; transition: all .15s; font-family: inherit;
}
.vibe-example:hover { border-color: #FFD100; color: #FFD100 }

/* ── Chat bubbles ────────────────────────────────────────────────────────────── */
.vibe-bubble { display: flex; flex-direction: column; gap: 6px }
.vibe-bubble-user { align-items: flex-end }
.vibe-bubble-ai { align-items: flex-start }

.vibe-bubble-label { font-size: 11px; font-weight: 700; color: #FFD100; padding: 0 2px }

.vibe-bubble-user .vibe-bubble-content {
  background: #FFD100; color: #111; padding: 10px 14px;
  border-radius: 12px 12px 4px 12px; font-size: 14px; line-height: 1.5;
  max-width: 85%; white-space: pre-wrap; word-break: break-word;
}
.vibe-bubble-ai .vibe-bubble-content {
  background: #1a1a1a; border: 1px solid #2a2a2a;
  padding: 10px 14px; border-radius: 4px 12px 12px 12px;
  font-size: 14px; line-height: 1.6; max-width: 95%; word-break: break-word;
}
.vibe-bubble-ai .vibe-bubble-content:empty { display: none }

/* markdown inside AI bubble */
.vibe-bubble-ai .vibe-bubble-content p { margin-bottom: 8px }
.vibe-bubble-ai .vibe-bubble-content p:last-child { margin-bottom: 0 }
.vibe-bubble-ai .vibe-bubble-content h1,.vibe-bubble-ai .vibe-bubble-content h2,.vibe-bubble-ai .vibe-bubble-content h3 { color: #FFD100; margin: 10px 0 5px }
.vibe-bubble-ai .vibe-bubble-content ul,.vibe-bubble-ai .vibe-bubble-content ol { margin: 4px 0 4px 18px }
.vibe-bubble-ai .vibe-bubble-content li { margin-bottom: 3px }
.vibe-bubble-ai .vibe-bubble-content code { background: #0f0f0f; border: 1px solid #333; border-radius: 3px; padding: 1px 5px; font-size: 12px; color: #FFD100; font-family: 'Consolas',monospace }
.vibe-bubble-ai .vibe-bubble-content pre { background: #0f0f0f; border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px; overflow-x: auto; margin: 8px 0 }
.vibe-bubble-ai .vibe-bubble-content pre code { background: none; border: none; padding: 0; color: #e0e0e0 }
.vibe-bubble-ai .vibe-bubble-content strong { color: #fff }

/* ── Status row (spinner + text) ────────────────────────────────────────────── */
.vibe-status-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #555; padding: 2px 0;
}
.vibe-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #2a2a2a; border-top-color: #FFD100;
  animation: vibe-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes vibe-spin { to { transform: rotate(360deg) } }
.vibe-check-pass { color: #22c55e; font-size: 12px; font-weight: 600 }
.vibe-check-revised { color: #f97316; font-size: 12px; font-weight: 600 }
.vibe-err { color: #E24B4A; font-size: 13px }

/* ── Input area ─────────────────────────────────────────────────────────────── */
.vibe-input-area {
  padding: 10px 14px 12px;
  border-top: 1px solid #222;
  flex-shrink: 0;
  background: #0f0f0f;
}
.vibe-input-row { display: flex; gap: 8px; align-items: flex-end }
.vibe-input {
  flex: 1; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 10px 14px; color: #e0e0e0; font-size: 15px; resize: none;
  outline: none; font-family: inherit; max-height: 160px; min-height: 44px; line-height: 1.5;
}
.vibe-input:focus { border-color: #FFD100 }
.vibe-send-btn {
  background: #FFD100; color: #111; border: none; padding: 0 20px;
  border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700;
  height: 44px; flex-shrink: 0; transition: background .15s;
}
.vibe-send-btn:hover { background: #ea6c0a; color: #fff }
.vibe-send-btn:disabled { background: #333; color: #555; cursor: not-allowed }
.vibe-input-hint { font-size: 11px; color: #333; margin-top: 6px; text-align: center }

/* ── Preview pane (right column) ────────────────────────────────────────────── */
.vibe-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a0a;
  transition: all .2s;
}
.vibe-preview:not(.open) { width: 0; overflow: hidden; border: none }
.vibe-preview.open { display: flex }
.vibe-preview-header {
  padding: 10px 12px;
  border-bottom: 1px solid #222;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 8px;
}
.vibe-preview-title {
  font-size: 12px; color: #888; font-family: monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.vibe-preview-tabs {
  display: flex; border-bottom: 1px solid #222; flex-shrink: 0;
}
.vibe-preview-tab {
  flex: 1; padding: 7px; font-size: 12px; background: none;
  border: none; border-bottom: 2px solid transparent; color: #555;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.vibe-preview-tab.active { color: #FFD100; border-bottom-color: #FFD100 }
.vibe-preview-tab:hover:not(.active) { color: #888 }
.vibe-preview-body { flex: 1; overflow: auto; position: relative }
.vibe-preview-code {
  margin: 0; padding: 12px 8px; font-size: 12px;
  font-family: 'Consolas', monospace; color: #bbb; line-height: 1.6;
  white-space: pre; tab-size: 2; min-height: 100%;
}
.vibe-line { display: block }
.vibe-line-no { display: inline-block; width: 36px; color: #3a3a3a; text-align: right; margin-right: 10px; user-select: none; flex-shrink: 0 }
.vibe-line-text { color: #ccc }
.vibe-diff-view { padding: 8px; min-height: 100% }

/* ── Diff renderer ───────────────────────────────────────────────────────────── */
.vibe-diff { font-family: 'Consolas', monospace; font-size: 12px; line-height: 1.6 }
.vd-add { background: rgba(34,197,94,.1); color: #86efac; display: flex; gap: 0 }
.vd-del { background: rgba(239,68,68,.1); color: #fca5a5; display: flex; gap: 0 }
.vd-ctx { color: #555; display: flex; gap: 0 }
.vd-ellipsis { color: #3a3a3a; padding: 4px 0; font-style: italic }
.vd-pfx { width: 14px; flex-shrink: 0; opacity: .7 }
.vd-ln { width: 36px; flex-shrink: 0; text-align: right; margin-right: 10px; opacity: .4 }
.vd-txt { flex: 1; white-space: pre-wrap; word-break: break-all }

/* ── Work Order Card ─────────────────────────────────────────────────────────── */
.vibe-work-order-slot { margin-top: 8px; width: 100% }
.vibe-work-order {
  background: #111; border: 1px solid #FFD100;
  border-radius: 10px; overflow: hidden;
  transition: opacity .2s;
}
.wo-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #2a2a2a; background: #1a1200; gap: 10px;
}
.wo-header-left { display: flex; flex-direction: column; gap: 3px; flex: 1 }
.wo-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #FFD100 }
.wo-summary { font-size: 12px; color: #aaa; line-height: 1.4 }
.wo-dismiss-btn {
  background: none; border: none; color: #444; cursor: pointer;
  font-size: 14px; padding: 0; line-height: 1; flex-shrink: 0;
}
.wo-dismiss-btn:hover { color: #888 }

.wo-section { padding: 10px 14px; border-bottom: 1px solid #1e1e1e }
.wo-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: #444; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.wo-count {
  background: #2a2a2a; color: #666; border-radius: 10px;
  font-size: 10px; padding: 1px 6px; font-weight: 600;
}

.wo-file-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid #1a1a1a;
}
.wo-file-row:last-child { border-bottom: none }
.wo-file-icon { font-size: 13px; flex-shrink: 0 }
.wo-file-path { flex: 1; font-size: 12px; color: #ccc; font-family: monospace; word-break: break-all }
.wo-file-tag {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,209,0,.1); color: #FFD100; border: 1px solid rgba(255,209,0,.3);
  flex-shrink: 0;
}
.wo-diff-btn {
  background: none; border: 1px solid #2a2a2a; border-radius: 5px;
  color: #555; font-size: 11px; padding: 2px 8px; cursor: pointer;
  transition: all .15s; flex-shrink: 0; font-family: inherit;
}
.wo-diff-btn:hover { border-color: #FFD100; color: #FFD100 }

.wo-cmd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #1a1a1a; font-size: 12px;
}
.wo-cmd-row:last-child { border-bottom: none }
.wo-cmd-prompt { color: #FFD100; font-family: monospace; flex-shrink: 0 }
.wo-cmd-text { color: #ccc; font-family: 'Consolas', monospace; word-break: break-all; flex: 1 }

.wo-actions {
  display: flex; gap: 8px; padding: 12px 14px; align-items: center;
}
.wo-run-btn {
  background: #FFD100; color: #111; border: none; border-radius: 8px;
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s; flex: 1;
}
.wo-run-btn:hover { background: #ea6c0a; color: #fff }
.wo-run-btn:disabled { background: #333; color: #555; cursor: not-allowed }
.wo-run-btn.wo-run-done { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid #22c55e; cursor: default }
.wo-cancel-btn {
  background: none; border: 1px solid #2a2a2a; border-radius: 8px;
  color: #555; font-size: 13px; padding: 10px 14px; cursor: pointer; transition: all .15s;
}
.wo-cancel-btn:hover { border-color: #555; color: #888 }

/* ── Run progress steps ──────────────────────────────────────────────────────── */
.wo-progress { padding: 10px 14px; border-top: 1px solid #1e1e1e }
.wo-progress-steps { display: flex; flex-direction: column; gap: 4px }
.wo-step {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12px; color: #555;
  border-bottom: 1px solid #141414;
}
.wo-step:last-child { border-bottom: none }
.wo-step-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 13px }
.wo-step-label { flex: 1; font-family: monospace; color: #888; word-break: break-all }
.wo-step-detail { font-size: 11px; color: #555 }
.wo-step-running .wo-step-icon { animation: vibe-spin .7s linear infinite; display: inline-block }
.wo-step-running .wo-step-label { color: #FFD100 }
.wo-step-ok .wo-step-icon { color: #22c55e }
.wo-step-ok .wo-step-label { color: #555 }
.wo-step-err .wo-step-icon { color: #E24B4A }
.wo-step-err .wo-step-label { color: #E24B4A }
.wo-step-err .wo-step-detail { color: #E24B4A }

.wo-terminal {
  background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 6px;
  padding: 10px; font-size: 11px; font-family: 'Consolas', monospace;
  color: #888; line-height: 1.6; max-height: 200px; overflow-y: auto;
  margin-top: 8px; white-space: pre-wrap; word-break: break-all;
}
.wo-term-cmd { color: #FFD100 }
.wo-term-warn { color: #f97316 }
.wo-term-err { color: #E24B4A }

.wo-autofix-btn {
  width: 100%; margin-top: 8px; background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.3); border-radius: 6px;
  color: #E24B4A; font-size: 12px; padding: 8px; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.wo-autofix-btn:hover { background: rgba(239,68,68,.15) }

/* ── Diff modal (mobile) ─────────────────────────────────────────────────────── */
.vibe-diff-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  z-index: 300; display: flex; align-items: flex-end; justify-content: center;
}
.vibe-diff-modal-inner {
  background: #111; border: 1px solid #2a2a2a;
  border-radius: 14px 14px 0 0; width: 100%; max-height: 80vh;
  display: flex; flex-direction: column;
}
.vibe-diff-modal-header {
  padding: 14px 16px; border-bottom: 1px solid #222;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.vibe-diff-modal-title { font-size: 13px; font-weight: 600; color: #e0e0e0; font-family: monospace }
.vibe-diff-modal-body { flex: 1; overflow-y: auto; padding: 12px }

/* ── Mobile overrides ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vibe-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .vibe-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: 1px solid #333;
  }
  .vibe-sidebar.open { transform: translateX(0) }
  .vibe-preview { display: none !important }
  .vibe-main { grid-column: 1; grid-row: 1 }
  .vibe-input { font-size: 16px }
  .vibe-bubble-user .vibe-bubble-content { max-width: 90% }
  .vibe-bubble-ai .vibe-bubble-content { max-width: 100% }
  .wo-run-btn { font-size: 16px; padding: 12px }
  .wo-diff-btn { padding: 6px 12px; font-size: 13px }
  .wo-file-row { padding: 8px 0 }
}

@media (max-width: 680px) {
  #vibe-view { padding-bottom: 0 }
  .vibe-messages { padding: 10px }
  .vibe-input-area { padding: 8px 10px 10px }
  .vibe-input { font-size: 16px; padding: 10px 12px }
  .vibe-send-btn { padding: 0 16px; font-size: 16px }
}
#mobile-nav.hidden{display:none}

/* ── Send button loading spinner ─────────────────────────────────────────── */
.vibe-send-btn.vibe-send-loading {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px;
}
.vibe-btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25); border-top-color: #111;
  animation: vibe-spin .7s linear infinite;
  display: inline-block;
}
.vibe-send-btn:disabled .vibe-btn-spinner {
  border-color: rgba(255,255,255,.15); border-top-color: #888;
}

.vibe-timer {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(39,116,174,0.12);
  border-radius: 6px;
  padding: 2px 6px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}