@media (max-width: 768px){.app{flex-direction:column}.auth-screen{height:auto;min-height:100dvh;overflow-y:auto;padding:16px 0;align-items:flex-start}.auth-card{width:92%;padding:20px 16px;margin:0 auto}.auth-logo{font-size:44px;margin-bottom:4px}.auth-card h1{font-size:22px}.auth-subtitle{font-size:13px;margin-bottom:16px}.auth-tabs{margin-bottom:14px}.auth-card input{padding:12px;font-size:16px}.auth-card form{gap:10px}.btn-block{padding:12px;font-size:16px}.chat-list{width:100%;height:100dvh;border-right:none}.chat-list-header{padding:8px 12px}.chat-item{padding:10px 12px}.chat-item-avatar{width:44px;height:44px}.chat-window{position:fixed;top:0;left:0;right:0;height:100dvh;z-index:50;display:none}.chat-window.active{display:flex}.chat-input-area{padding-bottom:calc(10px + env(safe-area-inset-bottom))}.chat-header{padding-top:calc(10px + env(safe-area-inset-top))}.chat-list-header{padding:6px 10px}.chat-item{padding:8px 10px}.chat-item-avatar{width:40px;height:40px;font-size:17px}.chat-item-top strong{font-size:14px}.chat-item-preview{font-size:12px}.chat-header{padding:8px 10px}.chat-header-info strong{font-size:15px}.chat-header-status{font-size:12px}.chat-header-actions .icon-btn{width:34px;height:34px;font-size:16px}.messages-area{padding:6px 8px}.message-bubble{padding:6px 10px}.message-text{font-size:14px}.message-time{font-size:10px}.chat-input-area{padding:6px 8px;gap:6px}.chat-input-area .icon-btn{width:36px;height:36px;font-size:16px}.chat-input-area textarea{padding:8px 10px;font-size:15px}.send-btn{width:38px;height:38px}.back-btn{width:32px;height:32px;font-size:16px}.chat-header .back-btn{display:flex;width:36px;height:36px;border-radius:50%;background:var(--bg-tertiary);color:var(--text);font-size:18px;border:none;align-items:center;justify-content:center}.messages-area{padding:8px 10px}.message-bubble{max-width:85%}.image-message img{max-width:240px;max-height:240px}.chat-input-area{padding:8px 10px}.chat-input-area .icon-btn{width:40px;height:40px}.chat-input-area textarea{font-size:16px}.picker-popup{bottom:60px;right:8px;left:8px}.sticker-popup{width:auto;max-height:300px}.sticker-cell{font-size:28px}.modal{width:92%;max-height:85vh}.user-row{padding:12px 10px}.incoming-call{top:8px;right:8px;left:8px}.incoming-call-card{width:100%}.notifications{bottom:8px;left:8px;right:8px;max-width:none}.call-window{padding:8px}.local-video{width:120px;bottom:8px;right:8px}.audio-call-avatar{width:120px;height:120px;font-size:48px}.auth-card{width:92%;padding:24px}.auth-card h1{font-size:24px}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e1621;--bg-secondary: #17212b;--bg-tertiary: #242f3d;--bg-hover: #1e2a3a;--text: #e8e8e8;--text-muted: #8a94a6;--accent: #2ea6ff;--accent-hover: #1f8fd9;--danger: #e53935;--success: #43a047;--border: #2b3646;--bubble-mine: #2b5278;--bubble-theirs: #182533}html,body,#root{height:100%}body{font-family:Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;-webkit-user-select:none;user-select:none}.btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-size:14px;transition:background .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#c62828}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#388e3c}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-hover)}.btn-block{width:100%}.btn-sm{padding:4px 10px;font-size:12px}.btn-lg{padding:12px 28px;font-size:16px}.icon-btn{width:38px;height:38px;border:none;border-radius:50%;background:var(--bg-tertiary);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.icon-btn:hover{background:var(--bg-hover)}.auth-screen{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,#0e1621,#1a2a44)}.auth-card{width:400px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:32px;text-align:center}.auth-logo{font-size:56px;margin-bottom:8px}.auth-card h1{font-size:28px;margin-bottom:4px}.auth-subtitle{color:var(--text-muted);font-size:14px;margin-bottom:24px}.auth-tabs{display:flex;gap:8px;margin-bottom:20px}.auth-tabs button{flex:1;padding:10px;border:none;border-radius:8px;background:var(--bg-tertiary);color:var(--text);cursor:pointer;font-size:14px}.auth-tabs button.active{background:var(--accent);color:#fff}.auth-card form{display:flex;flex-direction:column;gap:12px}.auth-card input{padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text);font-size:15px;outline:none}.auth-card input:focus{border-color:var(--accent)}.auth-error{background:#e5393526;color:#ff8a80;padding:10px;border-radius:8px;font-size:13px;text-align:left}.app{display:flex;height:100%}.chat-list{width:320px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column}.chat-list-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.user-info{display:flex;align-items:center;gap:10px;flex:1}.user-meta{display:flex;flex-direction:column;line-height:1.2}.user-meta span{font-size:12px}.status-online{color:var(--success)}.status-offline{color:var(--danger)}.avatar{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;flex-shrink:0}.chat-list-items{flex:1;overflow-y:auto}.chat-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .1s}.chat-item:hover{background:var(--bg-hover)}.chat-item.active{background:var(--bg-tertiary)}.chat-item-avatar{width:48px;height:48px;border-radius:50%;background:var(--bg-tertiary);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;flex-shrink:0}.presence-dot{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--text-muted);border:2px solid var(--bg-secondary)}.presence-dot.online{background:var(--success)}.chat-item-body{flex:1;min-width:0}.chat-item-top{display:flex;justify-content:space-between;align-items:center}.chat-item-top strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item-time{font-size:11px;color:var(--text-muted)}.chat-item-preview{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typing-text{color:var(--accent);font-style:italic}.empty-chats{text-align:center;padding:40px 16px;color:var(--text-muted)}.empty-chats p{margin-bottom:16px}.chat-list-footer{padding:12px 16px;border-top:1px solid var(--border)}.chat-window{flex:1;background:var(--bg);display:flex;flex-direction:column}.chat-window.empty{display:flex;align-items:center;justify-content:center}.empty-state{text-align:center;color:var(--text-muted)}.empty-icon{font-size:72px;margin-bottom:16px}.empty-state h2{font-size:22px;margin-bottom:8px}.chat-header{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.chat-header-info{display:flex;align-items:center;gap:12px;flex:1}.chat-header-info strong{font-size:16px}.chat-header-status{font-size:13px;color:var(--text-muted)}.chat-header-actions{display:flex;gap:8px}.messages-area{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;background-image:radial-gradient(circle at 20% 20%,rgba(46,166,255,.03) 0%,transparent 50%)}.history-loader{text-align:center;color:var(--text-muted);font-size:12px;padding:8px}.message-row{display:flex;gap:8px;margin-bottom:6px;align-items:flex-start}.message-row.mine{flex-direction:row-reverse}.message-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-tertiary);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.message-bubble{max-width:65%;background:var(--bubble-theirs);border-radius:12px;padding:8px 12px;word-break:break-word}.message-bubble.mine{background:var(--bubble-mine)}.message-sender{font-size:12px;color:var(--accent);margin-bottom:2px}.message-text{font-size:15px;line-height:1.4;white-space:pre-wrap}.message-time{font-size:11px;color:var(--text-muted);text-align:right;margin-top:4px}.message-bubble.sticker{background:transparent;padding:4px}.sticker-content{font-size:64px;line-height:1}.file-message{display:flex;align-items:center;gap:10px;background:var(--bg-tertiary);border-radius:10px;padding:10px 14px;cursor:pointer;min-width:220px}.file-icon{font-size:28px}.file-info{display:flex;flex-direction:column;flex:1;min-width:0}.file-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-info span{font-size:12px;color:var(--text-muted)}.image-message{padding:0;background:transparent}.image-message img{max-width:320px;max-height:320px;border-radius:10px;cursor:pointer;display:block}.file-meta{display:flex;flex-direction:column;font-size:12px;color:var(--text-muted)}.upload-progress{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--bg-secondary);border-top:1px solid var(--border)}.progress-bar{flex:1;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.progress-bar>div{height:100%;background:var(--accent);transition:width .2s}.chat-input-area{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--bg-secondary);border-top:1px solid var(--border)}.chat-input-area textarea{flex:1;resize:none;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text);font-size:15px;outline:none;max-height:120px;font-family:inherit}.chat-input-area textarea:focus{border-color:var(--accent)}.send-btn{width:44px;height:44px;border-radius:50%;font-size:18px}.picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0000004d}.picker-popup{position:fixed;bottom:80px;right:24px;z-index:101;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px #00000080}.sticker-popup{width:360px;max-height:400px;overflow-y:auto}.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px}.sticker-cell{font-size:32px;background:transparent;border:none;cursor:pointer;border-radius:8px;padding:6px}.sticker-cell:hover{background:var(--bg-hover)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#00000080;display:flex;align-items:center;justify-content:center}.modal{width:460px;max-height:80vh;background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:20px}.modal-tabs{display:flex;gap:8px}.modal-tabs button{flex:1;padding:8px;border:none;border-radius:8px;background:var(--bg-tertiary);color:var(--text);cursor:pointer}.modal-tabs button.active{background:var(--accent);color:#fff}.modal-input{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text);font-size:14px;outline:none}.modal-input:focus{border-color:var(--accent)}.user-list{flex:1;overflow-y:auto;min-height:200px}.user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-radius:8px}.user-row:hover{background:var(--bg-hover)}.user-row.selected{background:#2ea6ff26}.user-row-info{display:flex;flex-direction:column;flex:1}.user-row-info strong{font-size:14px}.user-row-info span{font-size:12px;color:var(--text-muted)}.check{color:var(--accent);font-size:18px}.empty-users{text-align:center;color:var(--text-muted);padding:24px}.call-window{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#0a0f14;display:flex;flex-direction:column;align-items:center;padding:20px}.call-header{display:flex;flex-direction:column;align-items:center;gap:4px}.call-header strong{font-size:22px}.call-header span{color:var(--text-muted);font-size:14px}.call-videos{flex:1;width:100%;position:relative}.remote-video{width:100%;height:100%;object-fit:contain;background:#000}.local-video{position:absolute;bottom:16px;right:16px;width:200px;border-radius:10px;border:2px solid var(--accent);object-fit:cover;background:#000}.audio-call-avatar{width:160px;height:160px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:64px;margin:40px auto}.call-timer{color:var(--text-muted);margin:12px 0}.call-actions{display:flex;gap:12px}.incoming-call{position:fixed;top:20px;right:20px;z-index:400}.incoming-call-card{display:flex;align-items:center;gap:12px;background:var(--bg-secondary);border:1px solid var(--accent);border-radius:14px;padding:14px 18px;box-shadow:0 8px 24px #00000080}.incoming-call-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}.incoming-call-info{display:flex;flex-direction:column}.incoming-call-info strong{font-size:15px}.incoming-call-info span{font-size:12px;color:var(--text-muted)}.incoming-call-actions{display:flex;gap:8px}.notifications{position:fixed;bottom:20px;left:20px;z-index:500;display:flex;flex-direction:column;gap:8px;max-width:320px}.notification{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 4px 12px #0006}.notification strong{font-size:13px}.notification span{font-size:12px;color:var(--text-muted)}.install-banner{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:600;display:flex;align-items:center;gap:12px;background:var(--bg-secondary);border:1px solid var(--accent);border-radius:14px;padding:12px 16px;box-shadow:0 8px 24px #00000080;max-width:92%}.install-icon{font-size:26px}.install-text{display:flex;flex-direction:column}.install-text strong{font-size:14px}.install-text span{font-size:12px;color:var(--text-muted)}.install-banner .btn{flex-shrink:0}.install-help{position:absolute;bottom:-74px;left:0;right:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text-muted);box-shadow:0 8px 24px #00000080}.install-help strong{color:var(--text)}@media (max-width: 768px){.install-banner{bottom:8px}.install-help{bottom:-64px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}