* { box-sizing: border-box; margin: 0; }
body { font: 15px/1.5 -apple-system, system-ui, sans-serif; background: #0f1115; color: #e5e7eb; height: 100vh; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid #262a33; }
h1 { font-size: 1.1rem; color: #3b82f6; }
nav button { background: none; border: 1px solid #262a33; color: #9ca3af; padding: .3rem .9rem; border-radius: 6px; cursor: pointer; }
nav button.active { color: #fff; border-color: #3b82f6; }
.tab { display: none; flex: 1; overflow: auto; padding: 1rem; }
.tab.active { display: flex; flex-direction: column; }
#mensagens { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1rem; }
.bolha { max-width: 75ch; padding: .5rem .8rem; border-radius: 10px; white-space: pre-wrap; }
.bolha.user { align-self: flex-end; background: #1d4ed8; }
.bolha.assistant { align-self: flex-start; background: #1f2430; }
#form-chat { display: flex; gap: .5rem; }
#form-chat input { flex: 1; padding: .5rem .8rem; border-radius: 8px; border: 1px solid #262a33; background: #161a22; color: inherit; }
#form-chat select, #form-chat button { padding: .5rem .8rem; border-radius: 8px; border: 1px solid #262a33; background: #161a22; color: inherit; cursor: pointer; }
pre { white-space: pre-wrap; }
#mem-lista { list-style: none; padding-bottom: 1rem; }
#mem-lista a { color: #3b82f6; }