v1.css

:root{--bg:#fbfaf8;--panel:#f3f1ed;--line:#e6e2db;--ink:#1d1b18;--mute:#77716a;--acc:#2f5bea;--user:#e3ecff;font:15px/1.55 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;height:100vh;display:grid;grid-template-columns:76px 272px 1fr;background:var(--bg);overflow:hidden}
button{font:inherit;cursor:pointer}
#rail{display:flex;flex-direction:column;gap:6px;padding:14px 8px;background:var(--panel);border-right:1px solid var(--line);align-items:center}
.ch{position:relative;width:58px;border:0;background:none;border-radius:14px;padding:6px 0 4px;display:flex;flex-direction:column;align-items:center;color:var(--mute)}
.ch .em{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:#fff;border:1px solid var(--line);transition:.15s}
.ch:hover .em{transform:translateY(-1px);box-shadow:0 2px 8px #0001}.ch.on .em{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.ch .lbl{font-size:10.5px;margin-top:3px;max-width:58px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch.on .lbl{color:var(--ink);font-weight:600}
.badge{position:absolute;top:2px;right:4px;min-width:17px;height:17px;border-radius:9px;background:var(--acc);color:#fff;font-size:10.5px;display:grid;place-items:center;padding:0 4px}
.grow{flex:1}.ch.add .em{background:none;border-style:dashed}
#side{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:18px 12px 12px;min-height:0}
.chhead{padding:0 6px 12px}.chname{font-weight:650;font-size:17px}.purpose{color:var(--mute);font-size:12.5px;line-height:1.4;margin-top:3px}
.new{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;text-align:left;margin-bottom:8px}.new:hover{border-color:#cfc9bf}
#q{border:1px solid transparent;background:var(--panel);border-radius:10px;padding:7px 10px;font:inherit;font-size:13.5px;outline:none}#q:focus{border-color:var(--acc);background:#fff}
.sessions{flex:1;overflow:auto;margin-top:8px}
.grp{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:12px 8px 4px}
.sess{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;color:inherit;text-decoration:none;font-size:14px}
.sess:hover{background:var(--panel)}.sess.on{background:#fff;box-shadow:0 0 0 1px var(--line)}.sess .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.when{color:var(--mute);font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;background:#cfcac2;flex:none;display:inline-block}.dot.open{background:#22a06b;box-shadow:0 0 0 3px #22a06b22}.dot.waiting{background:#e5a50a;box-shadow:0 0 0 3px #e5a50a22}
.empty{color:var(--mute);font-size:13px;padding:12px 8px}
.world{border-top:1px solid var(--line);padding:10px 6px 0;font-size:13px}.wrow{display:flex;justify-content:space-between;padding:3px 0}.wrow b{font-weight:600}.wsub{color:var(--mute);font-size:12px;padding:0 0 3px 22px;line-height:1.35}
#stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
header{padding:16px 32px 12px;border-bottom:1px solid var(--line)}.title{font-weight:650;font-size:17px}.sub{color:var(--mute);font-size:12.5px;display:flex;align-items:center;gap:7px}
.scroll{flex:1;overflow:auto}.msgs{max-width:780px;margin:0 auto;padding:28px 32px 40px;display:flex;flex-direction:column;gap:22px}
.m.user{display:flex;justify-content:flex-end}.bubble{background:var(--user);padding:10px 15px;border-radius:18px 18px 4px 18px;max-width:78%;white-space:pre-wrap}
.m.agent .body>*:first-child{margin-top:0}.m.agent .body>*:last-child{margin-bottom:0}.m.agent table{border-collapse:collapse;font-size:14px}.m.agent td,.m.agent th{border:1px solid var(--line);padding:5px 10px}
.steps{font-size:12.5px;color:var(--mute);margin-bottom:6px}.steps summary{cursor:pointer;list-style:none}.steps summary::before{content:"⚙︎ "}.steps div{font-family:ui-monospace,Menlo,monospace;padding:2px 0 2px 16px}
.typing i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#bbb;animation:b 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}@keyframes b{50%{opacity:.25}}
.composer{max-width:780px;width:100%;margin:0 auto 22px;padding:0 32px;position:relative}
.composer textarea{width:100%;resize:none;border:1px solid var(--line);border-radius:16px;padding:14px 54px 14px 16px;font:inherit;outline:none;box-shadow:0 2px 12px #0000000a;min-height:52px}.composer textarea:focus{border-color:#c9c3b8}
.composer button{position:absolute;right:42px;top:9px;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:17px}
.hero{max-width:560px;margin:18vh auto 0;text-align:center;padding:0 24px}.hero .big{font-size:44px}.hero h1{font-size:24px;margin:10px 0 6px}.hero p{color:var(--mute)}

/* bubbles for both sides */
.msgs{gap:14px}
.m.user{flex-direction:column;align-items:flex-end}.m.user .stamp{margin:3px 6px 0}
.m.agent{display:flex;gap:10px;align-items:flex-end}
.m.agent .av{width:32px;height:32px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-size:16px;flex:none}
.m.agent .col{display:flex;flex-direction:column;max-width:78%;min-width:0}
.who{font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 4px 12px}.stamp{font-size:11.5px;font-weight:400;color:var(--mute)}
.abub{background:#f1efeb;border-radius:18px 18px 18px 4px;padding:10px 15px;max-width:100%;white-space:normal;overflow-x:auto}
.abub .steps{margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid #e3dfd8}
.abub p{margin:.45em 0}.abub table{background:#fff;border-radius:6px}
.bubble{box-shadow:0 1px 1px #0000000d}
.m{animation:pop .18s ease-out}@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.98)}}