:root{font-family:Inter,system-ui,sans-serif;color:#173432;background:#edf6f5;font-size:16px}*{box-sizing:border-box}body{margin:0;padding-bottom:72px}header{height:68px;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100% - 760px)/2));border-bottom:1px solid #d8e6e4}.brand{display:flex;align-items:center;gap:10px}.brand div{display:grid}.brand small{color:#6a817f}.mark{width:38px;height:38px;border-radius:12px;background:#0f625d;color:white;display:grid;place-items:center;font-weight:800}button{border:0;border-radius:12px;padding:11px 16px;background:#0f625d;color:white;font:inherit;cursor:pointer}header button{background:#e4f1ef;color:#145d58}main{max-width:760px;margin:auto;padding:26px 18px;display:grid;gap:24px}.welcome{padding:26px;border-radius:22px;background:linear-gradient(135deg,#0f625d,#17877f);color:white;display:flex;justify-content:space-between;align-items:start;box-shadow:0 14px 34px #145c542d}.welcome h1{font-size:30px;margin:8px 0}.welcome p{margin:0;color:#daf0ed}.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}.status{background:#ffffff22;border:1px solid #ffffff42;padding:7px 10px;border-radius:99px;font-size:13px}h2{font-size:20px}.appointment,.dialog{background:white;border-radius:18px;padding:20px;border:1px solid #d8e6e4}.appointment{display:grid;grid-template-columns:auto 1fr;gap:16px}.date{width:68px;height:68px;border-radius:15px;background:#dff1ef;display:grid;place-items:center;text-align:center;color:#145d58;font-weight:700}.appointment strong,.appointment span{display:block}.appointment span{color:#607b78;margin-top:5px}.dialog>div p{color:#607b78;margin-top:-8px}.dialog form{display:flex;gap:10px}.dialog textarea{flex:1;min-height:74px;padding:12px;border:1px solid #bcd1ce;border-radius:12px;font:inherit;resize:vertical}.history{display:flex;flex-direction:column;gap:8px;margin-top:18px;max-height:280px;overflow:auto}.bubble{padding:10px 13px;border-radius:14px;background:#edf5f4;max-width:82%}.bubble.outbound{align-self:flex-start}.bubble.inbound{align-self:flex-end;background:#ccebe7}.bubble small{display:block;color:#68807e;margin-top:4px}.bottom{display:none}@media(max-width:600px){header{padding:0 16px}.welcome{display:grid;gap:20px}.welcome h1{font-size:26px}.dialog form{display:grid}.bottom{position:fixed;display:flex;bottom:0;left:0;right:0;background:white;border-top:1px solid #d8e6e4;justify-content:space-around;padding:9px}.bottom a{text-decoration:none;color:#6a817f;padding:8px}.bottom a.active{color:#0f625d;font-weight:700}}