:root{--bg: #0f1117;--surface: #1a1d23;--surface2: #22262e;--border: #2e333d;--amber: #f59e0b;--amber-dim: #92610a;--green: #22c55e;--red: #ef4444;--text: #e8eaf0;--text-2: #8b92a5;--text-3: #545d6e;--radius: 12px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}#root{height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:48px 40px;width:100%;max-width:380px;text-align:center}.login-logo{width:64px;height:64px;background:var(--amber);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:28px}.login-card h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}.login-card p{color:var(--text-2);font-size:.9rem;margin-bottom:32px}.login-features{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;text-align:left}.login-feature{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:.88rem}.login-feature-icon{width:28px;height:28px;background:var(--surface2);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}.login-loading{color:var(--amber);font-size:.85rem;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px}.spin{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-shell{display:flex;flex-direction:column;height:100vh}.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}.topbar-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;letter-spacing:-.01em}.topbar-brand-icon{width:28px;height:28px;background:var(--amber);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}.topbar-user{display:flex;align-items:center;gap:12px}.topbar-avatar{width:30px;height:30px;border-radius:50%;border:2px solid var(--border)}.topbar-name{font-size:.88rem;color:var(--text-2);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-logout{background:transparent;border:1px solid var(--border);color:var(--text-2);padding:5px 12px;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .15s}.btn-logout:hover{border-color:var(--red);color:var(--red)}.app-body{display:flex;flex:1;min-height:0}.sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}.sidebar-header h2{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}.search-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.85rem;color:var(--text);outline:none;transition:border-color .15s}.search-input::placeholder{color:var(--text-3)}.search-input:focus{border-color:var(--amber)}.contact-list{flex:1;overflow-y:auto;min-height:0}.contact-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);position:relative}.contact-item:hover,.contact-item.active{background:var(--surface2)}.contact-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);border-radius:0 2px 2px 0}.contact-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--border)}.contact-item.active .contact-avatar{border-color:var(--amber)}.contact-meta{flex:1;min-width:0}.contact-name{font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-email{font-size:.75rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}.contact-empty{padding:40px 20px;text-align:center;color:var(--text-3);font-size:.85rem}.add-contact-section{padding:14px 16px;border-top:1px solid var(--border);flex-shrink:0}.add-contact-section h3{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}.add-contact-row{display:flex;gap:8px}.add-contact-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:.82rem;color:var(--text);outline:none;min-width:0;transition:border-color .15s}.add-contact-input::placeholder{color:var(--text-3)}.add-contact-input:focus{border-color:var(--amber)}.btn-add{background:var(--amber);color:#000;border:none;border-radius:8px;padding:8px 12px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .15s;flex-shrink:0}.btn-add:disabled{opacity:.4;cursor:not-allowed}.btn-add:not(:disabled):hover{opacity:.85}.server-status{padding:6px 16px;font-size:.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}.server-status.error{color:var(--red)}.server-status.checking{color:var(--amber)}.main-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);gap:12px}.empty-state-icon{width:64px;height:64px;background:var(--surface);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;border:1px solid var(--border)}.empty-state h2{font-size:1rem;font-weight:600;color:var(--text-2)}.empty-state p{font-size:.85rem}.chat-header{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;flex-shrink:0}.chat-header-avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--border)}.chat-header-info{flex:1}.chat-header-name{font-size:.95rem;font-weight:600}.chat-header-status{font-size:.75rem;color:var(--text-3);display:flex;align-items:center;gap:5px}.chat-header-status.online{color:var(--green)}.conn-badge{display:flex;align-items:center;gap:6px;font-size:.75rem;padding:4px 10px;border-radius:20px;border:1px solid var(--border);color:var(--text-2)}.conn-badge.connected{border-color:var(--green);color:var(--green)}.conn-badge.error{border-color:var(--red);color:var(--red)}.message-history{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:0}.msg-row{display:flex;align-items:flex-end;gap:8px}.msg-row.mine{flex-direction:row-reverse}.msg-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0}.msg-bubble{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;max-width:60%;display:flex;flex-direction:column;gap:6px}.msg-row.mine .msg-bubble{background:var(--surface2);border-color:var(--amber-dim)}.msg-label{font-size:.7rem;color:var(--text-3);display:flex;align-items:center;justify-content:space-between;gap:12px}.msg-time{color:var(--text-3);font-size:.68rem}.msg-audio-player{display:flex;align-items:center;gap:8px}.btn-play{width:30px;height:30px;border-radius:50%;background:var(--amber);border:none;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:opacity .15s}.btn-play:hover{opacity:.8}.audio-wave{display:flex;align-items:center;gap:2px;height:20px}.wave-bar{width:3px;border-radius:2px;background:var(--text-3);transition:height .1s}.msg-row.mine .wave-bar{background:var(--amber-dim)}.audio-wave.playing .wave-bar{background:var(--amber);animation:wave .8s ease-in-out infinite}.wave-bar:nth-child(1){animation-delay:0s;height:6px}.wave-bar:nth-child(2){animation-delay:.1s;height:12px}.wave-bar:nth-child(3){animation-delay:.2s;height:18px}.wave-bar:nth-child(4){animation-delay:.1s;height:12px}.wave-bar:nth-child(5){animation-delay:0s;height:8px}@keyframes wave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.msg-duration{font-size:.72rem;color:var(--text-3)}.msg-incoming-indicator{font-size:.75rem;color:var(--amber);display:flex;align-items:center;gap:6px;padding:4px 0;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ptt-controls{padding:24px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0;background:var(--surface)}.ptt-row{display:flex;align-items:center;gap:20px}.ptt-btn{width:80px;height:80px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:28px;position:relative;transition:transform .15s,background .15s;background:var(--amber);color:#000;box-shadow:0 0 #f59e0b66}.ptt-btn:disabled{background:var(--surface2);color:var(--text-3);cursor:not-allowed}.ptt-btn.recording{background:var(--red);color:#fff;animation:pulse-ring 1.2s ease-out infinite}@keyframes pulse-ring{0%{box-shadow:0 0 #ef444480}70%{box-shadow:0 0 0 20px #ef444400}to{box-shadow:0 0 #ef444400}}.ptt-btn:not(:disabled):not(.recording):hover{transform:scale(1.05)}.ptt-btn:not(:disabled):active{transform:scale(.96)}.ptt-label{font-size:.75rem;color:var(--text-3);text-align:center;margin-top:6px}.ptt-label.recording{color:var(--red);font-weight:600}.btn-mute{width:40px;height:40px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}.btn-mute:hover{border-color:var(--amber);color:var(--amber)}.btn-mute.muted{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)}@media (max-width: 640px){body{height:100dvh;overflow:hidden}#root{height:100dvh}.app-shell{height:100dvh;display:grid;grid-template-rows:56px 1fr}.topbar{position:sticky;top:0;z-index:100}.app-body{flex-direction:column;overflow:hidden;min-height:0}.sidebar{width:100%;height:100%;border-right:none;border-bottom:none;max-height:none}.sidebar.contact-active{display:none}.main-panel{flex:1;min-height:0;height:100%}.contact-list{max-height:none;flex:1}.ptt-controls{padding:16px}.ptt-btn{width:68px;height:68px;font-size:24px}.topbar-name{display:none}.btn-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--amber);font-size:.9rem;font-weight:600;cursor:pointer;padding:4px 0}.chat-back-btn{display:flex!important}input,select,textarea{font-size:16px!important}}.chat-back-btn,.btn-back{display:none}.msg-transcript{font-size:.82rem;color:var(--text-2);font-style:italic;line-height:1.4;margin-bottom:4px}.msg-row.mine .msg-transcript{color:var(--text)}.btn-delete-contact{width:22px;height:22px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--text-3);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:all .15s}.contact-item:hover .btn-delete-contact{opacity:1;border-color:var(--border)}.btn-delete-contact:hover{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background:#0f1117}