*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f3f5f9;color:#182033}a{color:#3157d5;text-decoration:none}header{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #e3e6ee;padding:12px 5%;display:flex;align-items:center;justify-content:space-between}.brand{font-size:22px;font-weight:800}nav{display:flex;align-items:center;gap:16px}nav>a{display:flex;align-items:center;gap:6px;color:#31384a}.badge{background:#e33;color:#fff;border-radius:20px;padding:2px 6px;font-size:11px}main{width:min(920px,92%);margin:28px auto}.card{background:#fff;border:1px solid #e4e7ef;border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:0 4px 20px #17203a0a}.auth{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#edf1ff,#f9faff)}.auth .card{width:min(420px,92%)}input,textarea{width:100%;padding:12px;border:1px solid #ccd2df;border-radius:10px;margin:7px 0;font:inherit}textarea{min-height:85px;resize:vertical}button,.button{border:0;border-radius:10px;background:#3157d5;color:#fff;padding:10px 15px;font-weight:700;cursor:pointer;display:inline-block}button:disabled{opacity:.55}.secondary{background:#eef0f5;color:#333}.avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;background:#dfe5ff;color:#3157d5;font-weight:800;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}nav .avatar{width:30px;height:30px;flex-basis:30px}.person{display:flex;align-items:center;gap:12px}.person p{margin:5px 0}.person small{display:block;color:#7c8497;margin-top:5px}.composer button{margin-top:8px}.postimg{display:block;max-width:100%;max-height:550px;margin:12px auto;border-radius:12px}.actions{display:flex;gap:10px;align-items:center;border-top:1px solid #eee;padding-top:12px}.actions form{display:flex;flex:1;gap:7px}.actions input{margin:0}.comment{background:#f4f6fa;padding:9px 12px;border-radius:10px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:15px}.user{text-align:center}.user .avatar,.profile .avatar{width:86px;height:86px;flex-basis:86px;margin:0 auto}.chat{display:grid;grid-template-columns:240px 1fr;gap:15px}.chat aside{background:#fff;border-radius:16px;padding:10px;height:70vh;overflow:auto}.chat section{height:70vh;display:flex;flex-direction:column}.friend{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;cursor:pointer}.friend.active{background:#edf1ff}.messages{flex:1;overflow:auto;padding:10px 0}.bubble{width:max-content;max-width:75%;background:#eef0f5;padding:9px 12px;border-radius:14px;margin:7px 0}.bubble.mine{background:#3157d5;color:#fff;margin-left:auto}.send{display:flex;gap:8px}.send input{margin:0}.profile{max-width:550px;margin:auto}.error{color:#c22}.loading{text-align:center;margin-top:100px}.small{padding:7px 10px}@media (max-width:760px){header{align-items:flex-start;gap:10px;flex-direction:column}nav{width:100%;overflow-x:auto;padding-bottom:4px}main{margin-top:18px}.chat{grid-template-columns:1fr}.chat aside{height:auto;display:flex;overflow-x:auto}.chat section{height:60vh}.actions{align-items:stretch;flex-direction:column}.actions form{flex-direction:column}}.iconLink{position:relative}.iconLink .badge{margin-left:4px;min-width:18px;text-align:center}.imagePicker{display:inline-block;margin:8px 10px 8px 0;padding:10px 14px;border:1px solid #ccd2df;border-radius:10px;background:#f7f8fb;font-weight:700;cursor:pointer}.imagePicker input{display:none}.previewWrap{margin:10px 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.imagePreview{max-width:100%;max-height:420px;border-radius:14px;object-fit:contain;border:1px solid #e4e7ef}.profilePreview{width:86px;height:86px;flex-basis:86px;margin:0 auto}.composerTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.emojiWrap{position:relative;display:inline-block}.emojiButton{background:#f7f8fb;color:#333;border:1px solid #ccd2df;margin:8px 0}.emojiPicker{position:absolute;z-index:30;top:48px;left:0;width:280px;max-height:220px;overflow:auto;background:#fff;border:1px solid #dfe3ec;border-radius:12px;padding:8px;box-shadow:0 12px 35px #17203a26;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.emojiPicker button{background:transparent;color:inherit;padding:5px;font-size:22px;border-radius:7px}.emojiPicker button:hover{background:#f0f2f7}.commentForm{display:flex;flex:1;gap:7px;align-items:flex-start}.commentInput{display:flex;flex:1;gap:6px;align-items:center}.commentInput input{margin:0}.commentInput .emojiButton{white-space:nowrap;margin:0}.commentInput .emojiPicker{left:auto;right:0}.commentForm>.error{width:100%}@media (max-width:760px){.commentForm,.commentInput{flex-direction:column;align-items:stretch}.emojiPicker{position:fixed;left:5%;right:5%;bottom:15px;top:auto;width:90%;grid-template-columns:repeat(8,1fr)}}.cameraTool{display:inline-block;vertical-align:top;margin:8px 8px 8px 0}.cameraTool>button{margin:0}.cameraPanel{margin-top:10px;padding:10px;border:1px solid #dfe3ec;border-radius:12px;background:#f7f8fb}.cameraPanel video{display:block;width:min(100%,420px);max-height:420px;background:#111;border-radius:10px;margin-bottom:8px}.authPhotoPreview{display:block;width:96px;height:96px;object-fit:cover;border-radius:50%;margin:8px auto;border:2px solid #e4e7ef}.profileLink,.profileIdentity{color:inherit;text-decoration:none}.profileIdentity{display:flex;flex-direction:column;align-items:center}.visitorProfile{display:flex;align-items:center;gap:22px}.visitorProfile>.avatar{width:96px;height:96px;font-size:36px;flex:0 0 96px}.visitorProfile>.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profileActions{display:flex;gap:10px;flex-wrap:wrap}.comment a,.person a{color:inherit}@media (max-width:650px){.visitorProfile{align-items:flex-start}.visitorProfile>.avatar{width:72px;height:72px;flex-basis:72px}}.callOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#101524cc;display:grid;place-items:center;padding:18px}.callCard{width:min(520px,96vw);background:#fff;border-radius:20px;padding:24px;text-align:center;box-shadow:0 20px 60px #0005}.callCard>.avatar{width:88px;height:88px;flex-basis:88px;margin:0 auto 10px}.callCard button{margin:5px}.danger{background:#d93444}.callVideos{position:relative;margin:12px 0}.callVideos video{width:100%;max-height:52vh;background:#111;border-radius:14px}.callVideos video+video{position:absolute;width:28%;right:10px;bottom:10px;border:2px solid white}.callVideos .audioOnly{display:none}.chatHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.chatHead h3{margin:0}.chatHead button{padding:8px 10px;margin:2px}@media (max-width:650px){.callCard{padding:18px}.chatHead{align-items:flex-start;flex-direction:column}}.callCard{max-height:94dvh;overflow:auto}.callVideos>video:first-child{display:block;width:100%;height:min(48dvh,380px);object-fit:contain}.callVideos .localPreview{height:110px;object-fit:cover}.callVideos.audioCall>video:first-child{height:1px;width:1px;opacity:0}.callError{position:fixed;bottom:18px;left:50%;transform:translate(-50%);width:min(92vw,620px);z-index:120;background:#fff1ee;color:#9b2020;border:1px solid #da8276;border-radius:12px;padding:14px;box-shadow:0 6px 20px #0003}.callError button{margin:8px}