*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#111b21}.login{height:100vh;display:flex;justify-content:center;align-items:center}.login-card{background:#202c33;padding:36px 30px;border-radius:20px;width:340px}.login-logo{font-size:48px;text-align:center;margin-bottom:8px}.login-card h1{color:#fff;text-align:center;margin:0 0 4px;font-size:24px}.login-sub{color:#8696a0;text-align:center;font-size:13px;margin:0 0 16px}.auth-err{background:#3d1a1a;color:#ff6b6b;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;text-align:center}.auth-ok{background:#1a3d25;color:#6bff9e;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;text-align:center}.login-card input:not(.pin-box){width:100%;padding:12px 16px;border-radius:10px;border:1px solid #2a3942;background:#2a3942;color:#fff;font-size:15px;outline:none;margin-bottom:12px}.login-card input:not(.pin-box):focus{border-color:#00a884}.pin-label{color:#8696a0;font-size:12px;margin:4px 0 8px}.pin-row{display:flex;gap:12px;justify-content:center;margin-bottom:14px}.pin-box{width:52px;height:56px;text-align:center;font-size:22px;font-weight:700;border-radius:12px;border:2px solid #2a3942;background:#2a3942;color:#fff;outline:none;transition:border .2s}.pin-box:focus{border-color:#00a884}.login-card button{width:100%;padding:13px;border-radius:10px;border:none;font-size:15px;background:#00a884;color:#fff;cursor:pointer;font-weight:700;transition:background .2s;margin-top:4px}.login-card button:hover{background:#008f72}.login-card button:disabled{background:#2a3942;color:#8696a0;cursor:not-allowed}.auth-switch{color:#8696a0;text-align:center;font-size:13px;margin-top:16px}.auth-link{color:#00a884;cursor:pointer;font-weight:600}.auth-link:hover{text-decoration:underline}.app{display:flex;height:100vh}.sidebar{width:300px;background:#202c33;color:#fff;display:flex;flex-direction:column;border-right:1px solid #2a3942}.sidebar-header{padding:16px;border-bottom:1px solid #2a3942}.sidebar-title{display:flex;align-items:center;gap:8px;margin-bottom:10px}.sidebar-title h2{margin:0;font-size:20px}.current-user-badge{display:flex;align-items:center;gap:8px;color:#8696a0;font-size:13px}.search-box{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #2a3942}.search-box input{flex:1;padding:9px 14px;border-radius:20px;border:none;background:#2a3942;color:#fff;font-size:14px;outline:none}.search-box button{background:#00a884;color:#fff;border:none;padding:9px 14px;border-radius:50%;cursor:pointer;font-size:15px}.recent-list{flex:1;overflow-y:auto}.recent-label{color:#8696a0;font-size:11px;font-weight:600;padding:10px 16px 4px;text-transform:uppercase;letter-spacing:.5px;margin:0}.recent-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .15s}.recent-item:hover,.recent-item.active{background:#2a3942}.recent-info{flex:1;min-width:0}.recent-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-preview{font-size:12px;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.recent-time{font-size:11px;color:#8696a0;flex-shrink:0}.avatar{width:40px;height:40px;border-radius:50%;background:#00a884;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}.avatar.sm{width:36px;height:36px;font-size:14px}.chat{flex:1;display:flex;flex-direction:column;min-width:0}.header{background:#202c33;color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;min-height:60px;border-bottom:1px solid #2a3942}.header-info{display:flex;flex-direction:column}.header-name{font-size:16px;font-weight:600}.header-enc{font-size:11px;color:#8696a0;margin-top:2px}.back-btn{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:0 4px;flex-shrink:0}.hello-banner{background:#1f2c34;color:#8696a0;text-align:center;padding:8px 20px;font-size:12px;border-bottom:1px solid #2a3942}.hello-banner strong{color:#e9edef}.messages{flex:1;overflow-y:auto;padding:16px 20px;background:#0b141a;display:flex;flex-direction:column}.mine{background:#005c4b;color:#fff;padding:8px 12px 4px;border-radius:12px 12px 2px;width:fit-content;max-width:70%;margin-left:auto;margin-bottom:6px}.other{background:#202c33;color:#fff;padding:8px 12px 4px;border-radius:12px 12px 12px 2px;width:fit-content;max-width:70%;margin-bottom:6px}.msg-text{display:block;font-size:15px;word-break:break-word}.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px}.msg-time{font-size:10px;color:#ffffff80}.ticks{font-size:12px;line-height:1}.ticks.sent{color:#ffffff73}.ticks.delivered{color:#ffffffa6}.ticks.seen{color:#53bdeb}.view-once-btn{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;padding:7px 14px;border-radius:20px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap}.view-once-btn:hover{background:#ffffff1a}.bottom{display:flex;gap:8px;padding:10px 12px;background:#202c33;align-items:center;border-top:1px solid #2a3942;position:relative}.bottom input{flex:1;padding:11px 16px;border-radius:20px;border:none;background:#2a3942;color:#fff;font-size:15px;outline:none}.icon-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:6px;border-radius:50%;color:#8696a0;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}.icon-btn:hover{background:#ffffff14}.upload-label{cursor:pointer}.send-btn{background:#00a884;color:#fff;border:none;padding:11px 14px;border-radius:50%;cursor:pointer;font-size:16px;flex-shrink:0;transition:background .15s}.send-btn:hover{background:#008f72}.emoji-wrap{position:relative}.emoji-picker{position:absolute;bottom:48px;left:0;background:#202c33;border:1px solid #2a3942;border-radius:16px;padding:10px;display:flex;flex-wrap:wrap;width:240px;gap:4px;box-shadow:0 4px 20px #00000080;z-index:100}.emoji-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:4px;border-radius:8px}.emoji-btn:hover{background:#ffffff1a}.popup-overlay{position:fixed;inset:0;background:#000000ed;z-index:1000;display:flex;justify-content:center;align-items:center;user-select:none;-webkit-user-select:none}@media print{.popup-overlay{display:none!important}}.popup-box{background:#1f2c34;border-radius:16px;overflow:hidden;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 8px 40px #000c}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:#fff;font-weight:600;font-size:15px;background:#2a3942}.popup-close{background:none;border:none;color:#aaa;font-size:22px;cursor:pointer}.popup-close:hover{color:#fff}.popup-media-wrap{display:flex;justify-content:center;align-items:center;padding:12px;pointer-events:none}.popup-media{max-width:80vw;max-height:70vh;border-radius:8px;object-fit:contain;-webkit-user-drag:none}video.popup-media{pointer-events:all}.popup-footer{text-align:center;padding:12px;font-size:12px;color:#8696a0;background:#2a3942}@media(max-width:768px){.app{position:relative;overflow:hidden}.sidebar{width:100%;height:100%}.chat{position:absolute;width:100%;height:100%;left:100%;top:0;transition:left .3s;background:#0b141a}.show-chat .chat{left:0}.show-chat .sidebar{display:none}.back-btn{display:inline-block}.popup-media{max-width:95vw;max-height:65vh}.emoji-picker{width:200px}.mine,.other{max-width:85%}.login-card{width:90vw;padding:28px 20px}}