.message-feed{flex:1;overflow-y:auto;border:1px solid #475569;border-radius:8px;background:#1a1f35;padding:1rem}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:1.1rem}.messages-container{display:flex;flex-direction:column;gap:.75rem}.message{padding:.75rem 1rem;border-radius:6px;border-left:3px solid #64748b}.message.own{background:#1e3a5f;border-left-color:#3b82f6;margin-left:2rem}.message.other{background:#2d3748;border-left-color:#10b981;margin-right:2rem}.message-header{display:flex;gap:.75rem;margin-bottom:.5rem;font-size:.85rem;color:#cbd5e1}.message-from{font-weight:600;color:#fbbf24}.message-to{color:#94a3b8}.message-time{color:#64748b;margin-left:auto}.message-content{color:#e2e8f0;line-height:1.5;white-space:pre-wrap;word-break:break-word}.message-feed::-webkit-scrollbar{width:8px}.message-feed::-webkit-scrollbar-track{background:#0f172a}.message-feed::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}.message-feed::-webkit-scrollbar-thumb:hover{background:#64748b}.message-input{background:#1a1f35;border:1px solid #475569;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.input-controls{display:flex;gap:.5rem}.recipient-select{padding:.5rem .75rem;background:#2d3748;color:#e2e8f0;border:1px solid #475569;border-radius:4px;font-size:.9rem;cursor:pointer;transition:all .2s}.recipient-select:hover:not(:disabled){background:#3d4758;border-color:#64748b}.recipient-select:disabled{opacity:.5;cursor:not-allowed}.input-area{display:flex;gap:.75rem}.message-textarea{flex:1;padding:.75rem;background:#2d3748;color:#e2e8f0;border:1px solid #475569;border-radius:4px;font-family:inherit;font-size:.95rem;resize:none;transition:all .2s}.message-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.message-textarea:disabled{opacity:.5;cursor:not-allowed}.send-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);color:#fff;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.send-button:hover:not(:disabled){background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.send-button:disabled{opacity:.5;cursor:not-allowed}.input-footer{display:flex;justify-content:space-between;font-size:.85rem;color:#94a3b8}.connection-status{font-weight:500}.sender-info{color:#cbd5e1}.sender-info strong{color:#fbbf24}.online-status{display:flex;align-items:center;gap:1.5rem;padding:.5rem 1rem;background:rgba(15,23,42,.5);border-radius:6px;border:1px solid #475569}.status-header{display:flex;align-items:center;gap:.5rem}.status-indicator{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.status-indicator.connected{background:#10b981;box-shadow:0 0 8px #10b98199}.status-indicator.disconnected{background:#ef4444;box-shadow:0 0 8px #ef444499}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status-text{font-size:.9rem;font-weight:500;color:#cbd5e1}.users-list{display:flex;align-items:center;gap:.75rem}.users-label{font-size:.85rem;color:#94a3b8;font-weight:500}.users-badges{display:flex;gap:.5rem;flex-wrap:wrap}.user-badge{display:inline-block;padding:.25rem .75rem;background:#2d3748;color:#e2e8f0;border-radius:12px;font-size:.8rem;border:1px solid #475569}.user-badge.current{background:#1e3a5f;border-color:#3b82f6;color:#3b82f6;font-weight:600}.no-users{color:#94a3b8;font-size:.8rem;font-style:italic}@media (max-width: 768px){.online-status{flex-direction:column;gap:.75rem;align-items:flex-start}.users-list{flex-direction:column;gap:.5rem}}.app{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#0f172a 0%,#1a1f35 100%)}.header{background:linear-gradient(90deg,#1e293b 0%,#334155 100%);border-bottom:2px solid #64748b;padding:1.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 6px #0000004d}.header-content h1{font-size:1.8rem;margin-bottom:.25rem;color:#fbbf24}.header-content p{font-size:.9rem;color:#cbd5e1;font-style:italic}.main{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:1rem;gap:1rem}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;text-align:center}.header-content h1{font-size:1.4rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f172a;color:#e2e8f0}#root{width:100%;height:100vh}