:root { --gap: 1rem; }
.two-col { display: grid; grid-template-columns: 340px 1fr; gap: var(--gap); }
.sidebar { display: flex; flex-direction: column; gap: var(--gap); }
.sidebar .row { display: flex; gap: .5rem; align-items: center; }
.list { list-style: none; margin: .25rem 0 0; padding: 0; max-height: 40vh; overflow: auto; }
.list li { padding: .35rem .5rem; border-radius: .4rem; cursor: pointer; }
.list li.active { background: var(--muted-border-color); }
.list.files { max-height: 45vh; }
.card { padding: .5rem .75rem; }
.hidden { display: none; }
.chat { display: flex; flex-direction: column; height: 60vh; }
.chat header { display: flex; justify-content: space-between; align-items: center; }
.chatlog { flex: 1; overflow: auto; padding: .5rem; border: 1px solid var(--muted-border-color); border-radius: .5rem; background: var(--muted-color); }
.chatlog .msg { margin-bottom: .75rem; }
.chatlog .role { font-weight: 600; opacity: .8; margin-right: .4rem; }
.chat footer form { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: start; }
#fileViewer pre { max-height: 40vh; overflow: auto; }
.muted { opacity: .75; }

@media (max-width: 960px) {
  .two-col { grid-template-columns: 1fr; }
}