.file-tree-toolbar { display: flex; gap: 4px; padding: 4px 8px; background: #252526; border-bottom: 1px solid #3e3e3e; } .file-tree-toolbar-btn { display: flex; align-items: center; justify-content: center; padding: 4px 8px; background: transparent; border: 1px solid transparent; border-radius: 3px; color: #cccccc; cursor: pointer; transition: all 0.2s; } .file-tree-toolbar-btn:hover { background: #2a2d2e; border-color: #3e3e3e; } .file-tree-toolbar-btn:active { background: #37373d; } .file-tree { height: calc(100% - 32px); overflow-y: auto; overflow-x: hidden; background: #1e1e1e; color: #cccccc; user-select: none; } .file-tree::-webkit-scrollbar { width: 10px; } .file-tree::-webkit-scrollbar-track { background: #1e1e1e; } .file-tree::-webkit-scrollbar-thumb { background: #424242; border-radius: 5px; } .file-tree::-webkit-scrollbar-thumb:hover { background: #4e4e4e; } .file-tree.loading, .file-tree.empty { display: flex; align-items: center; justify-content: center; color: #858585; font-size: var(--font-size-sm); } .tree-node { display: flex; align-items: center; padding: 4px 8px; cursor: pointer; font-size: var(--font-size-base); white-space: nowrap; transition: background 0.1s ease; } .tree-node:hover { background: #2a2d2e; } .tree-node.selected { background: #37373d; } .tree-arrow { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; font-size: var(--font-size-xs); color: #cccccc; } .tree-icon { margin-right: 6px; font-size: var(--font-size-md); } .tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } .tree-children { /* Children are indented via inline style */ } .tree-rename-input { flex: 1; background: #3c3c3c; border: 1px solid #007acc; border-radius: 2px; padding: 2px 4px; color: #cccccc; font-size: var(--font-size-base); font-family: inherit; outline: none; }