:root{--tg-bg: #0e0e10;--tg-bg-secondary: #1a1a1d;--tg-bg-tertiary: #232326;--tg-text: #e4e4e7;--tg-text-secondary: #9898a0;--tg-accent: #2aabee;--tg-accent-hover: #2295c9;--tg-green: #4fae4e;--tg-red: #e53935;--tg-border: #2d2d30;--tg-bubble-out: #2aabee;--tg-bubble-in: #2d2d30}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--tg-bg);color:var(--tg-text);min-height:100vh;overflow:hidden}.app{display:flex;height:100vh;max-width:1400px;margin:0 auto}.sidebar{width:380px;min-width:320px;background:var(--tg-bg-secondary);border-right:1px solid var(--tg-border);display:flex;flex-direction:column}.sidebar-header{padding:12px 16px;border-bottom:1px solid var(--tg-border);display:flex;align-items:center;gap:12px}.sidebar-header h1{font-size:20px;font-weight:600}.sidebar-header .menu-btn{background:none;border:none;color:var(--tg-text-secondary);padding:8px;cursor:pointer;border-radius:8px}.sidebar-header .menu-btn:hover{background:var(--tg-bg-tertiary);color:var(--tg-text)}.search-box{padding:8px 12px;border-bottom:1px solid var(--tg-border)}.search-box input{width:100%;padding:10px 16px 10px 40px;background:var(--tg-bg-tertiary);border:none;border-radius:20px;color:var(--tg-text);font-size:14px}.search-box input::placeholder{color:var(--tg-text-secondary)}.search-box input:focus{outline:none}.chat-list{flex:1;overflow-y:auto}.chat-item{display:flex;align-items:center;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--tg-border);gap:12px;transition:background .15s}.chat-item:hover,.chat-item.active{background:var(--tg-bg-tertiary)}.chat-item .avatar{width:48px;height:48px;border-radius:50%;background:var(--tg-accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;flex-shrink:0}.chat-item .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.chat-item .info{flex:1;min-width:0}.chat-item .name{font-weight:500;font-size:15px}.chat-item .preview{color:var(--tg-text-secondary);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item .meta{font-size:12px;color:var(--tg-text-secondary)}.chat-panel{flex:1;display:flex;flex-direction:column;background:var(--tg-bg);min-width:0}.chat-header{padding:12px 20px;border-bottom:1px solid var(--tg-border);background:var(--tg-bg-secondary);display:flex;align-items:center;gap:12px}.chat-header .back-btn{display:none;background:none;border:none;color:var(--tg-text);padding:8px;cursor:pointer}.chat-header .avatar{width:40px;height:40px;border-radius:50%;background:var(--tg-accent)}.chat-header .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.chat-header .title{flex:1;font-weight:600;font-size:16px}.chat-header .actions{display:flex;gap:8px}.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:4px;background:var(--tg-bg)}.message{max-width:65%;padding:8px 12px;border-radius:12px;font-size:15px;line-height:1.4;position:relative}.message.sent{align-self:flex-end;background:var(--tg-bubble-out);color:#fff;border-bottom-right-radius:4px}.message.received{align-self:flex-start;background:var(--tg-bubble-in);border-bottom-left-radius:4px}.message .time{font-size:11px;opacity:.8;margin-top:2px}.message.media img{max-width:100%;border-radius:8px}.message.media .file{display:flex;align-items:center;gap:8px;padding:8px}.input-area{padding:12px 20px;border-top:1px solid var(--tg-border);background:var(--tg-bg-secondary)}.input-area form{display:flex;gap:8px;align-items:center}.input-area form .attach-btn{flex-shrink:0;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;background:var(--tg-bg-tertiary);border:none;color:var(--tg-text);font-size:18px;display:flex;align-items:center;justify-content:center}.input-area form .attach-btn:hover{background:var(--tg-border)}.input-area form .attach-btn:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:var(--tg-bg-secondary);padding:24px;border-radius:16px;max-width:400px;width:90%;border:1px solid var(--tg-border)}.modal-content h3{margin-bottom:12px}.modal-content button{padding:10px 20px;background:var(--tg-accent);border:none;border-radius:8px;color:#fff;cursor:pointer}.modal-content button:hover{background:var(--tg-accent-hover)}.input-area input,.input-area textarea{flex:1;padding:12px 16px;background:var(--tg-bg-tertiary);border:none;border-radius:20px;color:var(--tg-text);font-size:15px;resize:none;max-height:120px}.input-area input:focus,.input-area textarea:focus{outline:none}.input-area button{width:48px;height:48px;border-radius:50%;background:var(--tg-accent);border:none;color:#fff;cursor:pointer;flex-shrink:0}.input-area button:hover{background:var(--tg-accent-hover)}.input-area button:disabled{opacity:.5;cursor:not-allowed}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--tg-bg);padding:20px}.login-box{width:100%;max-width:400px;padding:40px;background:var(--tg-bg-secondary);border-radius:16px;border:1px solid var(--tg-border)}.login-box h1{text-align:center;margin-bottom:24px;font-size:28px}.login-box input{width:100%;padding:14px 16px;margin-bottom:16px;background:var(--tg-bg-tertiary);border:1px solid var(--tg-border);border-radius:12px;color:var(--tg-text);font-size:16px}.login-box input:focus{outline:none;border-color:var(--tg-accent)}.login-box button{width:100%;padding:14px;background:var(--tg-accent);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:500;cursor:pointer}.login-box button:hover{background:var(--tg-accent-hover)}.login-box .switch{text-align:center;margin-top:16px;color:var(--tg-text-secondary)}.login-box .switch button{background:none;border:none;color:var(--tg-accent);cursor:pointer}.login-error{color:var(--tg-red);font-size:14px;margin-bottom:12px;text-align:center}.empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tg-text-secondary);padding:40px}.empty-chat .icon{font-size:80px;margin-bottom:16px;opacity:.5}.empty-chat h2{font-size:24px;margin-bottom:8px;color:var(--tg-text)}.empty-chat p{text-align:center;max-width:400px}@media (max-width: 768px){.sidebar{width:100%}.chat-panel{display:none}.chat-panel.active{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10}.chat-header .back-btn{display:block}}