*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif;background:#ece5db;color:#222}.app{height:100%;max-width:680px;margin:auto;background:#efe9df;display:flex;flex-direction:column}.top{height:62px;background:#008f7a;color:#fff;display:flex;align-items:center;padding:8px 14px;gap:10px}.avatar{width:44px;height:44px;border-radius:50%;background:#ddd center/cover no-repeat;flex:none}.who{flex:1}.name{font-weight:700;font-size:17px}.status{font-size:12px;opacity:.9;margin-top:3px}.icon{font-size:22px;cursor:pointer}.chat{flex:1;overflow:auto;padding:18px 12px 90px}.day{display:flex;justify-content:center;margin-bottom:15px}.day span{background:#dcefeb;border-radius:12px;padding:6px 12px;font-size:12px;color:#58706b}.bubble{max-width:88%;padding:10px 12px;border-radius:8px;margin:9px 0;line-height:1.35;box-shadow:0 1px 1px #bbb;font-size:15px;background:#fff}.bubble small{font-size:10px;color:#777;float:right;margin:7px 0 0 8px}.bubble.out{margin-left:auto;background:#d9fdd3}.interact{display:flex;flex-direction:column;gap:8px;margin:10px 4px}.interact button{border:0;border-radius:8px;background:#fff;padding:12px;text-align:left;font-size:15px;box-shadow:0 1px 2px #bbb;cursor:pointer}.inputbar{display:none;padding:10px;background:#f5f5f5;gap:8px}.inputbar.on{display:flex}.inputbar input{flex:1;border:1px solid #ccc;border-radius:22px;padding:12px;font-size:15px}.send{border:0;border-radius:50%;width:44px;background:#008f7a;color:white;font-size:20px}