*{box-sizing:border-box} body{margin:0;font:16px/1.4 -apple-system,Segoe UI,Roboto,Arial}
.app{max-width:880px;margin:0 auto;padding:12px}
header{font-weight:700;font-size:18px;margin:8px 0 12px}
.controls{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.controls input,.controls select{padding:6px 8px}
.messages{border:1px solid #ddd;border-radius:8px;padding:10px;min-height:48vh;overflow:auto;user-select:text}
.msg{padding:8px 10px;border-radius:6px;margin:8px 0;white-space:pre-wrap}
.msg.you{background:#f6f8ff}
.msg.ai{background:#f4f7f0}
.row{display:flex;gap:10px}
.compose{display:flex;gap:8px;margin-top:8px}
.compose textarea{flex:1;padding:10px;border:1px solid #ddd;border-radius:8px;font:inherit}
.compose button{padding:10px 14px;border:0;border-radius:8px;background:#0b72ff;color:#fff;font-weight:700}
.panel{border:1px solid #e3e3e3;border-radius:8px;padding:8px;margin:8px 0}
.panel h4{margin:0 0 6px 0}
.small{color:#666;font-size:12px}