VirtualLab/AutonomousResearcher

1body {2    font-family: 'Arial', sans-serif;3    background-color: #3d3d3d;4    color: #e0e0e0;5    padding: 0;6    margin: 0;7}8 9#container {10    display: flex;11    height: 100vh;12}13 14#sidebar {15    width: 300px;16    background-color: #2c2c2c;17    overflow-y: auto;18    padding: 10px;19    border-right: 1px solid #555;20    transition: width 0.3s ease;21}22 23#sidebar.collapsed {24    width: 30px;25}26 27#sidebar h3 {28    color: #91e991;29    text-align: center;30}31 32/* File tree container styling */33#file-tree {34    font-size: 0.9em;35    line-height: 1.4em;36}37 38#file-tree ul {39    list-style: none;40    padding-left: 20px;41}42 43#file-tree li {44    cursor: pointer;45    padding: 4px 6px;46    margin: 2px 0;47    display: flex;48    justify-content: space-between;49    align-items: center;50}51 52#file-tree li:hover {53    background-color: #555;54    text-decoration: underline;55}56 57/* Each tree element gets its own container */58.tree-element {59    padding: 4px;60    margin: 2px 0;61    border-radius: 4px;62}63 64/* Only the hovered element highlights */65.tree-element:hover {66    background-color: #555;67}68 69/* Folder styles */70.tree-folder {71    display: flex;72    align-items: center;73    cursor: pointer;74}75 76.folder-toggle {77    font-weight: bold;78    margin-right: 4px;79    user-select: none;80}81 82.folder-name {83    font-weight: bold;84}85 86/* Children container for folders */87.folder-children {88    margin-left: 16px;89    padding-left: 4px;90}91 92/* File styles */93.tree-file {94    display: flex;95    justify-content: space-between;96    align-items: center;97    padding: 4px 6px;98}99 100/* File buttons under file elements */101.file-buttons {102    display: flex;103    margin-top: 4px;104    gap: 8px;105    color: blue;106}107 108/* Style for view and download buttons */109.file-buttons button {110    background: none;111    border: none;112    cursor: pointer;113    color: blue;114    font-size: 16px; /* adjust if needed */115}116 117.file-buttons button img {118    width: 16px;119    height: 16px;120}121 122/* Buttons in file tree aligned right */123#file-tree .btn-container {124    display: flex;125    gap: 4px;126}127 128#file-tree button {129    background: none;130    border: none;131    cursor: pointer;132}133 134#file-tree button img {135    width: 16px;136    height: 16px;137}138 139#main {140    flex: 1;141    padding: 20px;142    overflow-y: auto;143}144 145h2 {146    color: #91e991;147    text-align: center;148}149 150#chat {151    max-width: 800px;152    margin: 0 auto;153    padding: 10px;154}155 156/* --- Adjusted Chat Message Styles --- */157 158/* Each message is a vertical stack */159.message {160    margin-bottom: 20px;161    display: flex;162    flex-direction: column;163}164 165/* Timestamp appears above the bubble-wrapper */166.timestamp {167    font-size: 0.8em;168    color: #888;169    margin-bottom: 4px;170}171 172/* Bubble wrapper: holds the icon and bubble next to each other */173.bubble-wrapper {174    display: flex;175    align-items: flex-start; /* Aligns the icon with the top of the bubble */176}177 178/* Icon styling: outside the bubble and aligned to the top */179.bubble-wrapper .icon {180    width: 24px;181    height: 24px;182    margin-right: 8px;183    align-self: flex-start;184}185 186/* Chat bubble styling (text container) */187.bubble {188    max-width: 75%;189    padding: 10px 15px;190    border-radius: 15px;191    white-space: pre-wrap;192    background-color: #175654;193    color: #e0e0e0;194}195 196/* Different background colors for different message types */197.message.command .bubble {198    background-color: #000000;199    color: #9c9c9c;200    border: 2px solid white;201    border-radius: 1px;202}203.message.terminal .bubble {204    background-color: #000000;205    color: #9c9c9c;206    border: 2px solid white;207    border-radius: 1px;208}209 210/* Terminal messages aligned to the right */211.message.terminal {212    align-items: flex-end;213    text-align: right;214}215 216/* Style the command prefix */217.command-prefix {218    font-weight: bold;219    color: green;220}221 222/* The rest of the command text */223.command-text {224    color: inherit; /* use the default text color */225}226 227/* --- Specifications Section as a Table --- */228#specs {229    position: fixed;230    bottom: 0;231    left: 0;232    background-color: #2c2c2c;233    padding: 8px;234    font-size: 0.9em;235    color: #91e991;236    border-top-right-radius: 8px;237}238 239#specs table {240    border-collapse: collapse;241    width: 100%;242}243 244#specs td {245    padding: 4px 8px;246    border: none;247}