*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body.chat-home-body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0b141a;color:#e9edef}
.chat-app{position:relative;width:100%;height:100dvh;min-height:100vh;display:flex;flex-direction:column;background:#0b141a;overflow:hidden}
.chat-topbar{height:60px;min-height:60px;background:#202c33;display:flex;align-items:center;padding:0 10px;gap:10px;z-index:5;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.chat-back{width:38px;height:38px;border:0;background:transparent;color:#d9e1e5;display:grid;place-items:center;padding:0;cursor:pointer;flex:0 0 38px}
.chat-back svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-avatar-wrap{width:40px;height:40px;flex:0 0 40px}
.chat-avatar-link{display:block;width:40px;height:40px;border-radius:50%;text-decoration:none}.chat-avatar{width:40px;height:40px;border-radius:50%;display:block;object-fit:cover;background:#33434c}
.chat-avatar-fallback{display:grid;place-items:center;color:#cfe8dc;font-weight:700;font-size:18px}
.chat-contact{min-width:0;flex:1;line-height:1.15}
.chat-contact-name{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0f2f3}
.chat-contact-status{font-size:12px;margin-top:4px;color:#aebac1}
.chat-actions{height:100%;display:flex;align-items:center;gap:20px;color:#d9e1e5;flex:0 0 auto}
.chat-action-link{display:grid;place-items:center;color:inherit;text-decoration:none;width:23px;height:23px}.chat-actions svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-dots{width:8px;display:flex;flex-direction:column;gap:3px;align-items:center}
.chat-dots i{width:3px;height:3px;border-radius:50%;background:#d9e1e5}
.chat-wallpaper{position:relative;flex:1;min-height:0;overflow:auto;background:#0b141a url('/assets/chat-wallpaper.jpg') center top/420px auto repeat;}
.chat-wallpaper:before{content:"";position:fixed;inset:60px 0 0;pointer-events:none;background:rgba(11,20,26,.24);z-index:0}
.chat-content{position:relative;z-index:1;min-height:0;padding:18px 12px 110px;display:flex;flex-direction:column;align-items:center}
.encryption-notice{max-width:min(92vw,570px);background:#182229;color:#f0c36a;border-radius:9px;padding:11px 13px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 5px;text-align:center;font-size:13px;line-height:1.35;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.lock-icon{font-size:12px;line-height:1}
.encryption-notice a{color:#d7e7ef;font-weight:600;text-decoration:none;margin-left:2px}
.chat-cta-card{width:min(92vw,570px);margin-top:10px;background:rgba(32,44,51,.94);border-radius:10px;padding:9px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.chat-cta-profile-image{display:block;width:180px;max-width:52vw;height:225px;aspect-ratio:4 / 5;margin:0 auto 10px;border-radius:7px;object-fit:cover;background:#33434c}.chat-cta-text{color:#e9edef;text-align:center;font-size:14px;line-height:1.45;padding:0 6px 9px}.chat-cta-card a{display:flex;align-items:center;justify-content:center;width:min(86%,300px);margin:0 auto;min-height:42px;border-radius:8px;background:#00a884;color:#fff;text-decoration:none;font-size:14px;font-weight:700;padding:9px 14px}
.chat-composer{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,680px);z-index:50;display:flex;align-items:center;gap:8px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#0b141a;border-top:1px solid rgba(255,255,255,.03)}
.message-box{min-width:0;flex:1;min-height:50px;border-radius:26px;background:#202c33;display:flex;align-items:center;padding:0 7px;color:#aebac1}
.message-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#e9edef;font-size:16px;line-height:22px;padding:12px 5px}
.message-box input::placeholder{color:#8696a0}
.emoji-btn,.attach-btn,.camera-btn{width:36px;height:40px;flex:0 0 36px;border:0;background:transparent;color:#aebac1;display:grid;place-items:center;padding:0;cursor:pointer}
.emoji-btn{font-size:25px;line-height:1}
.attach-btn svg,.camera-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.send-btn{width:50px;height:50px;flex:0 0 50px;border:0;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.send-btn svg{width:23px;height:23px;fill:currentColor}
.send-btn:active,.chat-cta-card a:active{transform:scale(.97)}
@media (max-width:600px){
 .chat-topbar{height:56px;min-height:56px;padding:0 7px;gap:7px}
 .chat-wallpaper:before{inset:56px 0 0}
 .chat-avatar-wrap,.chat-avatar,.chat-avatar-link{width:38px;height:38px}
 .chat-actions{gap:12px}
 .chat-actions svg{width:21px;height:21px}
 .chat-contact-name{font-size:15px}
 .chat-contact-status{font-size:11px}
 .chat-content{padding:14px 8px 118px}
 .chat-cta-profile-image{width:170px;max-width:52vw;height:212.5px;border-radius:6px}
 .encryption-notice{max-width:94vw;font-size:12px;padding:9px 10px}
 .chat-composer{position:fixed;left:0;right:0;bottom:0;transform:none;width:100%;gap:6px;padding-top:6px;z-index:100}
 .message-box{min-height:48px}
 .message-box input{font-size:16px;padding-left:3px}
 .emoji-btn{display:none}
 .send-btn{width:48px;height:48px;flex-basis:48px}
}
@media (max-width:360px){
 .chat-actions{gap:8px}
 .chat-actions svg:first-child{display:none}
 .camera-btn{display:none}
 .attach-btn{width:32px;flex-basis:32px}
}
@media (min-width:900px){
 .chat-app{max-width:680px;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.45)}
 body.chat-home-body{background:#111b21}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}