*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#fff5f7;color:#222}
nav{display:flex;gap:16px;align-items:center;padding:12px 20px;background:#ff4f7b;color:#fff}nav a{color:#fff;text-decoration:none}nav b{margin-right:auto}
.box{max-width:360px;margin:40px auto;background:#fff;padding:24px;border-radius:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 18px #0001}
input,select,textarea,button{padding:10px;border:1px solid #ddd;border-radius:8px;font:inherit}
button{cursor:pointer;background:#fff}.pink,.box button{background:#ff4f7b;color:#fff;border:0}.err{color:#c00}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:20px}
.card{background:#fff;border-radius:14px;padding:18px;text-align:center;box-shadow:0 4px 18px #0001}
.avatar{width:90px;height:90px;border-radius:50%;background:#ff4f7b;color:#fff;font-size:40px;display:grid;place-items:center;margin:0 auto 8px}
.chatwrap{display:flex;height:calc(100vh - 48px)}aside{width:220px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:6px;overflow:auto}
aside a{padding:10px;border-radius:8px;text-decoration:none;color:#222}aside a.on,aside a:hover{background:#ffe0e8}
section{flex:1;display:flex;flex-direction:column}section header{display:flex;justify-content:space-between;padding:12px;background:#fff}
#msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.m{max-width:70%;padding:8px 12px;border-radius:14px;word-wrap:break-word}.me{align-self:flex-end;background:#ff4f7b;color:#fff}.them{background:#fff}
.send{display:flex;gap:8px;padding:10px;background:#fff}.send input{flex:1}
#callbox{position:relative;background:#000;padding:8px;text-align:center}#rv{width:100%;max-height:45vh}#lv{position:absolute;right:16px;bottom:56px;width:110px;border-radius:8px}
@media(max-width:640px){aside{width:90px}}