*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0F1721;--bg2:#1A2332;--bg3:#243044;--text:#E8ECF1;--muted:#8B95A5;--accent:#4CAF50;--accent-dim:rgba(76,175,80,0.15);--danger:#EF5350;--border:rgba(255,255,255,0.08);--bub-me:#1B5E20;--bub-them:#263238}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
.screen{display:none;height:100vh}.screen.active{display:flex}
.qr-container{margin:auto;text-align:center;padding:24px}
.logo{margin-bottom:24px}.logo-icon{width:64px;height:64px;border-radius:16px}
.logo h1{font-size:28px;font-weight:700;margin-top:8px}
.ghost-badge{background:var(--accent-dim);color:var(--accent);padding:4px 10px;border-radius:12px;font-size:13px;font-weight:600}
.ghost-badge.small{font-size:11px;padding:2px 8px}
.subtitle{color:var(--muted);margin-bottom:28px;line-height:1.5}
.subtitle small{opacity:0.7}
#qr-code{border-radius:16px;padding:16px;background:#fff;display:inline-block}
.status-msg{margin-top:16px;min-height:24px;color:var(--accent);font-size:14px}
.status-msg.error{color:var(--danger)}
.ghost-note{margin-top:24px;color:var(--muted);font-size:13px;opacity:0.7}
.connecting-container{margin:auto;text-align:center}
.spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.chat-layout{display:flex;height:100vh;width:100%}
.contacts-panel{width:320px;min-width:320px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column}
.panel-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.panel-header h2{font-size:18px;font-weight:700}
.header-icon{width:28px;height:28px;border-radius:6px}
.contacts-list{flex:1;overflow-y:auto}
.panel-footer{padding:10px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:11px;text-align:center}
.contact-item{padding:12px 20px;cursor:pointer;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);transition:background .15s}
.contact-item:hover,.contact-item.active{background:var(--bg3)}
.contact-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--accent);flex-shrink:0}
.contact-info{flex:1;min-width:0}
.contact-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-status{font-size:12px;color:var(--muted)}
.presence-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.presence-online{background:#4CAF50}.presence-away{background:#FF9800}.presence-dnd{background:#F44336}.presence-xa{background:#9E9E9E}.presence-offline{background:#616161}
.chat-panel{flex:1;display:flex;flex-direction:column;background:var(--bg)}
.chat-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--bg2)}
.back-btn{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;padding:4px 8px}
.chat-contact-info{flex:1}
#chat-contact-name{font-size:16px;font-weight:600;display:block}
#chat-contact-status{font-size:12px;color:var(--muted)}
.messages-container{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column}
.empty-chat{margin:auto;text-align:center;color:var(--muted)}.empty-chat span{font-size:48px;display:block;margin-bottom:12px}
.message{max-width:70%;padding:10px 14px;border-radius:16px;margin-bottom:6px;font-size:14px;line-height:1.4;word-wrap:break-word}
.message.me{background:var(--bub-me);align-self:flex-end;border-bottom-right-radius:4px}
.message.them{background:var(--bub-them);align-self:flex-start;border-bottom-left-radius:4px}
.message .msg-time{font-size:11px;color:rgba(255,255,255,0.4);margin-top:4px;text-align:right}
.message-input-area{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:10px;background:var(--bg2)}
#message-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:10px 16px;color:var(--text);font-size:14px;outline:none}
#message-input:focus{border-color:var(--accent)}
#message-input::placeholder{color:var(--muted)}
.send-btn{background:var(--accent);border:none;border-radius:50%;width:40px;height:40px;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.send-btn:hover{opacity:.85}
.reconnect-banner{position:fixed;top:0;left:0;right:0;background:#FF9800;color:#fff;text-align:center;padding:6px;font-size:13px;font-weight:600;z-index:100}
@media(max-width:768px){.contacts-panel{width:100%;min-width:100%}.chat-panel{display:none}.chat-layout.chat-open .contacts-panel{display:none}.chat-layout.chat-open .chat-panel{display:flex}.back-btn{display:block}}