* { box-sizing: border-box; font: 14px Arial, sans-serif; }
body { margin: 0; }
button { cursor: pointer; }
#app { display: flex; height: 100vh; }
#side { width: 280px; border-right: 1px solid #ccc; overflow-y: auto; }
#side h4 { margin: 0; padding: 6px 10px; background: #eee; font-weight: bold; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #ccc; }
#conn { font-size: 12px; color: #999; }
#conn.on { color: green; }
.item { padding: 8px 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.item:hover, .item.active { background: #e8f0fe; }
.item small { display: block; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.locked { color: #999; }
.none { padding: 8px 10px; color: #999; }
#main { flex: 1; display: flex; }
#empty { margin: auto; color: #999; }
#chat { flex: 1; display: flex; flex-direction: column; }
#chat[hidden], [hidden] { display: none !important; }
#lock { padding: 6px 10px; background: #fff3cd; }
#msgs { flex: 1; overflow-y: auto; padding: 10px; background: #f5f5f5; }
.m { margin: 4px 0; padding: 6px 8px; max-width: 70%; white-space: pre-wrap; word-wrap: break-word; background: #fff; border: 1px solid #ddd; }
.m.agent { margin-left: auto; background: #dbeafe; border-color: #bfdbfe; }
.m.system { margin: 6px auto; background: none; border: 0; color: #777; font-size: 12px; text-align: center; }
#foot { display: flex; border-top: 1px solid #ccc; }
#foot input { flex: 1; border: 0; padding: 12px; outline: none; }
#foot button { padding: 0 18px; }
#foot.off { opacity: .5; pointer-events: none; }
@media (max-width: 700px) { #side { width: 45%; } }

/* login / setup / agents pages */
.page { max-width: 380px; margin: 40px auto; padding: 0 16px; }
.page.wide { max-width: 900px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #ccc; }
.card h2 { margin: 0; font-size: 18px; }
.card label { display: flex; flex-direction: column; gap: 4px; }
.card label.check { flex-direction: row; align-items: center; }
.card input[type=email], .card input[type=password], .card input:not([type]) { padding: 8px; border: 1px solid #bbb; }
.card button { padding: 9px; }
.err { color: #b91c1c; } .ok { color: green; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th, td { padding: 6px; border: 1px solid #ddd; text-align: left; vertical-align: middle; }
form.inline { display: inline-flex; gap: 4px; margin: 2px 0; }
form.inline input { padding: 4px; width: 120px; }
.bar.me { font-size: 13px; background: #fafafa; }
h2 { font-size: 18px; font-weight: bold; } h3 { font-size: 16px; font-weight: bold; }