:root{
  --bg:#0f1115;
  --panel:#161a20;
  --panel2:#12151b;
  --border:#2a2f3a;
  --border2:#3a3f4b;
  --text:#d4d4d4;
  --muted:#9aa4b2;

  --user:#4ec9b0;
  --claude:#c586c0;
  --info:#9cdcfe;
  --warn:#f44747;

  --dot:#6a9955;
  --dotGrey:#666a75;
  --rule:#222733;

  --chip:#20242c;

  --codeBg:#1a1f27;
  --codeBorder:#3a3f4b;

  --blue:#007acc;
  --blue2:#0e639c;

  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 40% 15%, rgba(80,95,140,.20), transparent 70%),
              radial-gradient(900px 500px at 75% 30%, rgba(150,120,190,.12), transparent 70%),
              var(--bg);
  color:var(--text);
  font-family:var(--ui);
  overflow:hidden;
}

/* App layout */
.app{
  height:100%;
  display:grid;
  grid-template-columns: 360px 1fr;
}

/* Left builder */
.builder{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--panel2);
  border-right:1px solid var(--border);
  padding:16px 14px;
  overflow:auto;
}

.title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.title .badge{
  width:10px;height:10px;border-radius:999px;background:var(--dot);
  box-shadow:0 0 0 3px rgba(106,153,85,.15);
}
.title h1{
  margin:0;
  font-size:14px;
  letter-spacing:.2px;
  color:#e6e6e6;
  font-weight:650;
}
.sub{
  margin:0 0 16px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
}

.section{
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,.02);
  margin-bottom:12px;
}
.section h2{
  margin:0 0 10px 0;
  font-size:12px;
  font-weight:700;
  color:#f0f0f0;
  letter-spacing:.2px;
}
label{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin:10px 0 6px;
}
input[type="text"], textarea, select, input[type="number"]{
  width:100%;
  background: #0f1218;
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  color:var(--text);
  font-size:12px;
  outline:none;
}
textarea{ min-height:70px; resize:vertical; font-family:var(--ui); }
input[type="number"]{ padding:8px 10px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.btnRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
button{
  cursor:pointer;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#f0f0f0;
  padding:9px 10px;
  border-radius:12px;
  font-weight:650;
  font-size:12px;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
button:hover{ border-color:#394155; }
button:active{ transform: translateY(1px); }
.btnPrimary{
  border-color:#2b5a7e;
  background: linear-gradient(180deg, rgba(14,99,156,.55), rgba(14,99,156,.22));
}
.btnDanger{
  border-color:#6b2c2c;
  background: linear-gradient(180deg, rgba(244,71,71,.30), rgba(244,71,71,.12));
}
.btnSmall{
  padding:5px 8px;
  font-size:11px;
  min-width:auto;
}
.tiny{
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
  line-height:1.35;
}

/* Right preview */
.previewWrap{
  position:relative;
  overflow:auto;
  padding:18px 18px 80px;
}

/* Fake VS Code top tabs (optional) */
.vscodeTop{
  position:sticky;
  top:0;
  z-index:2;
  background: rgba(17,20,26,.80);
  backdrop-filter: blur(8px);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 10px 8px;
  margin-bottom:14px;
  box-shadow: var(--shadow);
}
.tabs{
  display:flex;
  gap:8px;
  align-items:center;
}
.tab{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,.03);
  color:#cfd6e4;
  font-size:12px;
}
.tab.active{
  border-color:#3a4a63;
  position:relative;
}
.tab.active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-6px;
  height:3px;
  background: var(--blue);
  border-radius:99px;
  opacity:.9;
}

.conversation{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  overflow:visible;
}

.convInner{
  display:grid;
  grid-template-columns: 190px 1fr;
  min-height:680px;
  padding-bottom:200px;
}

.gutter{
  position:relative;
  background: rgba(10,12,16,.55);
  border-right:1px solid var(--border);
  padding:18px 0;
}
.gutter::before{
  content:"";
  position:absolute;
  left:62px;
  top:18px;
  bottom:18px;
  width:2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), rgba(255,255,255,.12), transparent);
  opacity:.65;
}

.stream{
  padding:14px 18px 28px 18px;
  background: radial-gradient(800px 420px at 60% 5%, rgba(255,255,255,.04), transparent 65%);
}

.hr{
  height:2px;
  background: var(--rule);
  opacity:.8;
  margin:14px 0;
}

/* Timeline item layout */
.item{
  position:relative;
  padding-left:18px;
  margin:20px 0;
}
.item.draggable{
  cursor:move;
}
.item.dragging{
  opacity:0.5;
}
.dot{
  position:absolute;
  left:-128px;
  top:6px;
  width:12px;height:12px;border-radius:999px;
  background: var(--dot);
  box-shadow:0 0 0 4px rgba(106,153,85,.14);
}
.dot.grey{
  background: var(--dotGrey);
  box-shadow:none;
  opacity:.85;
}

/* Block controls */
.blockControls{
  position:absolute;
  top:4px;
  right:4px;
  display:flex;
  gap:6px;
  opacity:0;
  transition: opacity 0.15s ease;
  z-index:10;
}
.item:hover .blockControls{
  opacity:1;
}
.blockControls .btnDanger{
  font-size:16px;
  line-height:1;
  padding:2px 6px;
  font-weight:400;
}

/* Insert controls (above/below) */
.insertControl{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:none;
  z-index:20;
  background:#2d2d30;
  border:1px solid #454545;
  border-radius:6px;
  padding:5px 12px;
  font-size:11px;
  font-weight:500;
  color:#cccccc;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  transition:all .15s;
}
.insertControl:hover{
  background:#3e3e42;
  border-color:#5a5a5a;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  transform:translateX(-50%) scale(1.05);
}
.insertControl.above{
  top:-16px;
}
.insertControl.below{
  bottom:-16px;
}
.item:hover > .insertControl{
  display:block;
}

/* Insert dropdown menu */
.insertMenu{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:#252526;
  border:1px solid #454545;
  border-radius:8px;
  padding:4px;
  min-width:240px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  z-index:1000;
  display:none;
}
.insertMenu.show{
  display:block;
  animation:slideIn 0.15s ease-out;
}
@keyframes slideIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}
.insertMenu.above{
  top:-12px;
  transform:translateX(-50%) translateY(-100%);
}
.insertMenu.above.show{
  animation:slideInAbove 0.15s ease-out;
}
@keyframes slideInAbove{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(calc(-100% + 10px));
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(-100%);
  }
}
.insertMenu.below{
  bottom:-12px;
  transform:translateX(-50%) translateY(100%);
}
.insertMenuItem{
  padding:8px 12px;
  cursor:pointer;
  border-radius:4px;
  font-size:12px;
  color:#cccccc;
  transition:background .12s;
}
.insertMenuItem:hover{
  background:#2d2d30;
}

/* IN/OUT row controls */
.inoutRowControl{
  display:none;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  gap:4px;
  z-index:10;
}
.toolInOutLine{
  position:relative;
}
.toolInOutLine:hover .inoutRowControl{
  display:flex;
}
.inoutRowControl button{
  padding:3px 7px;
  font-size:10px;
  font-weight:500;
  background:#2d2d30;
  border:1px solid #454545;
  border-radius:4px;
  color:#aaaaaa;
  cursor:pointer;
  transition:all .12s;
}
.inoutRowControl button:hover{
  background:#3e3e42;
  border-color:#5a5a5a;
  color:#ffffff;
}

/* User prompt (no dot) */
.userLine{
  display:inline-flex;
  gap:8px;
  align-items:center;
  max-width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(78,201,176,.25);
  background: rgba(78,201,176,.06);
  color:var(--text);
  font-size:14px;
  line-height:1.35;
}
.userLabel{
  color:var(--user);
  font-weight:750;
  white-space:nowrap;
}

/* Thinking */
.thinking{
  color:#cfd6e4;
  font-style:italic;
  font-size:14px;
  opacity:.92;
  display:flex;
  align-items:center;
  gap:6px;
}
.caret{
  display:inline-block;
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid rgba(207,214,228,.65);
  transform: translateY(1px);
  opacity:.8;
}

/* Claude response / bash title */
.claudeHeader{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,.02);
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(197,134,192,.35);
  background: rgba(197,134,192,.10);
  color:var(--claude);
  font-weight:800;
  letter-spacing:.3px;
  font-size:12px;
}
.pill.bash{
  border-color: rgba(86,156,214,.35);
  background: rgba(86,156,214,.10);
  color:#9cdcfe;
  font-weight:750;
}
.claudeText{
  color:#e6e6e6;
  font-size:14px;
  line-height:1.35;
  flex:1;
}

/* Tool call blocks - proper VSCode Claude Code style */
.toolCall{
  margin-top:10px;
  border:1px solid var(--codeBorder);
  border-radius:10px;
  background: var(--codeBg);
  overflow:hidden;
}
.toolHeader{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background: rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.toolLabel{
  font-family:var(--ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  color:#9aa4b2;
  text-transform:uppercase;
}
.toolName{
  font-family:var(--mono);
  font-size:12px;
  color:#d4d4d4;
  font-weight:600;
}
.toolPath{
  font-family:var(--mono);
  font-size:12px;
  color:#9aa4b2;
  font-weight:400;
  margin-left:6px;
}
.toolDesc{
  font-family:var(--ui);
  font-size:12px;
  color:#9aa4b2;
  font-weight:400;
  margin-left:4px;
}
.toolContent{
  font-family:var(--mono);
  padding:10px 12px;
  font-size:12px;
  color:#d4d4d4;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.4;
}
.toolSeparator{
  height:1px;
  background: rgba(255,255,255,.06);
  margin:0;
}
.toolInOutLine{
  display:flex;
  gap:10px;
  padding:8px 10px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.4;
}
.toolInOutLabel{
  font-family:var(--ui);
  font-size:11px;
  font-weight:700;
  color:#9aa4b2;
  text-transform:uppercase;
  letter-spacing:.3px;
  flex-shrink:0;
  min-width:32px;
}
.toolInOutContent{
  color:#d4d4d4;
  white-space:pre-wrap;
  word-break:break-word;
  flex:1;
}

/* Bash blocks (legacy - now using tool call style) */
.ioBlock{
  margin-top:10px;
  display:grid;
  gap:10px;
}
.ioRow{
  display:grid;
  grid-template-columns: 74px 1fr;
  border-radius:12px;
  overflow:hidden;
  border:2px solid var(--codeBorder);
  background: var(--codeBg);
}
.ioTag{
  font-family:var(--ui);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.6px;
  font-size:12px;
  background: #2b2f3a;
  color:#d8d8ff;
  border-right:2px solid var(--codeBorder);
}
.ioCode{
  font-family:var(--mono);
  padding:12px 12px;
  font-size:13px;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.25;
}

/* Interrupt */
.interrupt{
  color:#888888;
  font-style:italic;
  font-size:14px;
  letter-spacing:.2px;
}

/* Allow prompt (modal) */
.overlayDim{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(1px);
  display:none;
  z-index:5;
}
.allowModal{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  background: rgba(22,26,32,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:14px;
  z-index:6;
  display:none;
}
.allowTitle{
  font-weight:800;
  font-size:18px;
  color:#f0f0f0;
  margin:0 0 10px 0;
}
.allowCmd{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  border-radius:12px;
  padding:10px 12px;
  font-family:var(--mono);
  color:#e6e6e6;
  font-size:13px;
  margin-bottom:12px;
  white-space:pre-wrap;
  word-break:break-word;
}
.allowOpt{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px;
  margin:8px 0;
  background: rgba(0,0,0,.18);
  color:#d7dde8;
  font-size:14px;
}
.allowOpt .num{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight:900;
  color:#e8eefb;
  flex:0 0 auto;
}
.allowOpt.active{
  border-color: rgba(0,122,204,.85);
  background: rgba(14,99,156,.40);
  box-shadow: inset 0 0 0 1px rgba(0,122,204,.55);
}
.allowOpt.active .num{
  border-color: rgba(0,122,204,.85);
  background: rgba(0,122,204,.30);
}
.allowInput{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background: rgba(0,0,0,.18);
  padding:10px 12px;
  color:#8f98a7;
  font-size:13px;
}
.allowFooter{
  margin-top:8px;
  font-size:12px;
  color:#9aa4b2;
}

/* Utility */
.muted{ color:var(--muted); }
.spacer8{ height:8px; }
.spacer12{ height:12px; }
.spacer18{ height:18px; }

/* Realistic Mode - Pixel-perfect VSCode Claude Code */
.realistic-mode .vscodeTop{
  padding:0;
  background: #1e1e1e;
  border:none;
  border-radius:0;
  box-shadow:none;
  margin-bottom:0;
  border-bottom:1px solid #2d2d30;
}
.realistic-mode .tabs{
  gap:0;
  padding:0;
  display:flex;
  align-items:stretch;
  height:35px;
  background:#252526;
}
.realistic-mode .tab{
  padding:0 12px;
  border:none;
  border-radius:0;
  background:transparent;
  font-size:13px;
  color:#969696;
  position:relative;
  display:flex;
  align-items:center;
  border-right:1px solid #1e1e1e;
  transition:background .1s, color .1s;
}
.realistic-mode .tab:hover:not(.active){
  background:rgba(255,255,255,.02);
}
.realistic-mode .tab.active{
  background:#1e1e1e;
  color:#ffffff;
}
.realistic-mode .tab.active::after{
  display:none;
}
.realistic-mode .tab:last-child{
  border-right:none;
}

.realistic-mode .conversation{
  border-radius:0;
  border:none;
  background: transparent;
  box-shadow:none;
}
.realistic-mode .convInner{
  grid-template-columns: 48px 1fr;
  min-height:400px;
  padding-bottom:200px;
}
.realistic-mode .gutter{
  background: transparent;
  border-right:1px solid #2d2d30;
  padding:8px 0;
}
.realistic-mode .gutter::before{
  display:none;
}
.realistic-mode .stream{
  padding:8px 12px 20px 12px;
  background: transparent;
}

.realistic-mode .item{
  margin:4px 0;
  padding-left:8px;
}

.realistic-mode .dot{
  width:8px;
  height:8px;
  top:4px;
  left:-32px;
  box-shadow:0 0 0 2px rgba(106,153,85,.08);
}
.realistic-mode .dot.grey{
  box-shadow:none;
}

.realistic-mode .userLine{
  border:none;
  background: #2d2d30;
  padding:6px 10px;
  font-size:13px;
  gap:6px;
  border-radius:3px;
}
.realistic-mode .userLabel{
  display:none;
}
.realistic-mode .userLine span:not(.userLabel){
  color:#cccccc;
}

.realistic-mode .thinking{
  font-size:12px;
  opacity:.65;
  font-style:italic;
  color:#858585;
  padding:2px 0;
}
.realistic-mode .thinkingEllipsis{
  display:none;
}
.realistic-mode .caret{
  border-top:5px solid rgba(133,133,133,.5);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
}

.realistic-mode .claudeHeader{
  padding:0;
  border:none;
  background:transparent;
  gap:0;
  display:block;
}
.realistic-mode .claudeHeader .pill{
  display:none;
}
.realistic-mode .claudeHeader .claudeText{
  color:#cccccc;
  font-size:13px;
  padding:4px 0;
  line-height:1.5;
}

.realistic-mode .toolCall{
  margin-top:6px;
  border:1px solid #3e3e42;
  border-radius:3px;
  background: #1e1e1e;
  overflow:hidden;
}
.realistic-mode .toolHeader{
  padding:6px 8px;
  background: transparent;
  border-bottom:1px solid #3e3e42;
  display:flex;
  gap:8px;
  align-items:center;
}
.realistic-mode .toolLabel{
  font-size:11px;
  font-weight:600;
  color:#858585;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.realistic-mode .toolName{
  font-size:13px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:0;
}
.realistic-mode .toolPath{
  font-size:13px;
  font-weight:400;
  color:#9cdcfe;
  margin-left:6px;
}
.realistic-mode .toolDesc{
  font-size:13px;
  font-weight:400;
  color:#cccccc;
  margin-left:6px;
}
.realistic-mode .toolContent{
  padding:8px 10px;
  font-size:12px;
  line-height:1.6;
  color:#cccccc;
  font-family: 'Consolas', 'Courier New', monospace;
}
.realistic-mode .toolSeparator{
  background: #3e3e42;
  height:1px;
  margin:0;
}
.realistic-mode .toolInOutLine{
  padding:6px 10px;
  gap:12px;
  font-size:12px;
  line-height:1.6;
}
.realistic-mode .toolInOutLabel{
  font-size:11px;
  font-weight:600;
  color:#858585;
  min-width:28px;
}
.realistic-mode .toolInOutContent{
  color:#cccccc;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* For Bash blocks - hide Claude label */
.realistic-mode .toolCall .toolHeader:has(.toolName) .toolLabel{
  display:none;
}

.realistic-mode .ioBlock{
  margin-top:6px;
  gap:0;
}
.realistic-mode .ioRow{
  grid-template-columns: 42px 1fr;
  border:1px solid #3e3e42;
  border-radius:3px;
  background: #1e1e1e;
}
.realistic-mode .ioTag{
  font-size:10px;
  letter-spacing:.2px;
  font-weight:600;
  background: transparent;
  border-right:1px solid #3e3e42;
  color:#858585;
}
.realistic-mode .ioCode{
  padding:8px 10px;
  font-size:12px;
  line-height:1.6;
  color:#cccccc;
}

.realistic-mode .interrupt{
  font-size:12px;
  font-style:italic;
  color:#858585;
  padding:2px 0;
}

.realistic-mode .hr{
  height:1px;
  background: #2d2d30;
  margin:8px 0;
}

/* Realistic Allow Modal - Much smaller and compact */
.realistic-mode .allowModal{
  left:50%;
  right:auto;
  bottom:auto;
  top:50%;
  transform:translate(-50%, -50%);
  max-width:480px;
  background: #252526;
  border:1px solid #3e3e42;
  border-radius:6px;
  padding:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.6);
}
.realistic-mode .allowTitle{
  font-size:13px;
  font-weight:600;
  margin:0 0 8px 0;
  color:#cccccc;
}
.realistic-mode .allowCmd{
  padding:6px 8px;
  font-size:11px;
  margin-bottom:8px;
  background: #1e1e1e;
  border:1px solid #2d2d30;
  border-radius:4px;
}
.realistic-mode .allowOpt{
  padding:8px 10px;
  margin:4px 0;
  font-size:12px;
  border:1px solid #2d2d30;
  border-radius:4px;
  background: #1e1e1e;
}
.realistic-mode .allowOpt .num{
  width:20px;
  height:20px;
  font-size:11px;
  border-radius:3px;
  border:1px solid #3e3e42;
  background: #2d2d30;
  font-weight:700;
}
.realistic-mode .allowOpt.active{
  border-color: #007acc;
  background: rgba(0,122,204,.15);
  box-shadow:none;
}
.realistic-mode .allowOpt.active .num{
  border-color: #007acc;
  background: #007acc;
  color:#ffffff;
}
.realistic-mode .allowInput{
  margin-top:8px;
  padding:6px 8px;
  font-size:11px;
  background: #1e1e1e;
  border:1px solid #2d2d30;
  border-radius:4px;
  color:#858585;
}
.realistic-mode .allowFooter{
  margin-top:6px;
  font-size:10px;
  color:#858585;
}

.realistic-mode .overlayDim{
  background: rgba(0,0,0,.5);
  backdrop-filter:none;
}

/* Block controls in realistic mode */
.realistic-mode .blockControls{
  margin-top:4px;
}
.realistic-mode .btnSmall{
  padding:3px 6px;
  font-size:10px;
  border-radius:3px;
}

/* Realistic mode container adjustments */
body.realistic-preview{
  background: #1e1e1e;
}
.realistic-mode ~ .previewWrap,
.previewWrap:has(.realistic-mode){
  background: #1e1e1e;
  padding:0;
}
.conversation.realistic-mode{
  margin:0;
}

/* Fix realistic mode color scheme */
.realistic-mode .userLine span:not(.userLabel){
  color:#d4d4d4;
}
.realistic-mode .toolContent,
.realistic-mode .ioCode{
  color:#d4d4d4;
}

/* Editable text indicators */
[contenteditable="false"][title="Click to edit"]{
  position:relative;
}

[contenteditable="false"][title="Click to edit"]:hover{
  background: rgba(255,255,255,.02);
  border-radius:2px;
  outline:1px solid rgba(255,255,255,.05);
  outline-offset:1px;
}

[contenteditable="false"][title="Click to edit"]:hover::after{
  content: '✏️';
  position:absolute;
  right:-18px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  opacity:0.5;
  pointer-events:none;
}

/* Prevent pencil overflow issues */
.toolInOutContent[contenteditable="false"][title="Click to edit"]:hover::after,
.toolContent[contenteditable="false"][title="Click to edit"]:hover::after{
  right:4px;
  top:4px;
  transform:none;
}

[contenteditable="true"]{
  border-radius:2px;
}

/* Tighter vertical spacing throughout */
.realistic-mode .item + .item{
  margin-top:2px;
}

/* Make VSCode tabs look authentic */
.realistic-mode .vscodeTop{
  position:sticky;
  top:0;
  z-index:10;
}

/* Adjust realistic mode timeline */
.realistic-mode .item{
  position:relative;
}

/* More compact response blocks */
.realistic-mode .claudeHeader + *{
  margin-top:2px;
}

/* Code syntax highlighting hints */
.realistic-mode .toolContent,
.realistic-mode .ioCode{
  font-family: 'Consolas', 'Courier New', monospace;
  tab-size: 4;
  -moz-tab-size: 4;
}

/* Realistic scrollbar for conversation */
.realistic-mode .stream::-webkit-scrollbar{
  width:10px;
}
.realistic-mode .stream::-webkit-scrollbar-track{
  background: #1e1e1e;
}
.realistic-mode .stream::-webkit-scrollbar-thumb{
  background: #424242;
  border-radius:5px;
}
.realistic-mode .stream::-webkit-scrollbar-thumb:hover{
  background: #4e4e4e;
}

/* Tab close button hint (visual only) */
.realistic-mode .tab.active::before{
  content:"×";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  color:#858585;
  font-size:16px;
  opacity:0;
  transition: opacity .15s;
}
.realistic-mode .tab.active:hover::before{
  opacity:1;
}

/* Ensure proper contrast */
.realistic-mode{
  color:#d4d4d4;
}

/* Fix gutter width */
.realistic-mode .convInner{
  grid-template-columns: 40px 1fr;
}
.realistic-mode .dot{
  left:-26px;
}

/* Hide the Add Block section - we use inline insert controls now */
.section:has(#blockType){
  display:none;
}

/* Small screens */
@media (max-width: 980px){
  body{ overflow:auto; }
  .app{ grid-template-columns: 1fr; }
  .previewWrap{ padding:12px; }
  .convInner{ grid-template-columns: 150px 1fr; }
  .dot{ left:-104px; }
}