*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;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}.app{height:100vh;display:flex;background-color:#f3f4f6}.friends-list{width:320px;background-color:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.friends-header{padding:16px;border-bottom:1px solid #e5e7eb}.friends-title{margin:0;font-size:20px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:8px}.friends-scroll{flex:1;overflow-y:auto}.friend-item{padding:16px;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:background-color .2s}.friend-item:hover{background-color:#f9fafb}.friend-item.selected{background-color:#eff6ff;border-color:#bfdbfe}.friend-content{display:flex;align-items:center;gap:12px}.friend-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500}.friend-avatar.purple{background-color:#8b5cf6}.friend-avatar.green{background-color:#10b981}.friend-avatar.pink{background-color:#ec4899}.friend-avatar.indigo{background-color:#6366f1}.friend-avatar.red{background-color:#ef4444}.friend-info{flex:1;min-width:0}.friend-header{display:flex;align-items:center;justify-content:space-between}.friend-name{font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.status-indicator{width:8px;height:8px;border-radius:50%}.status-indicator.online{background-color:#10b981}.status-indicator.offline{background-color:#d1d5db}.last-message{font-size:14px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0 0}.no-messages{font-size:14px;color:#9ca3af;margin:4px 0 0}.chat-window{flex:1;display:flex;flex-direction:column;background-color:#fff}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;background-color:#f9fafb}.empty-content{text-align:center}.empty-avatar{width:64px;height:64px;background-color:#e5e7eb;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.empty-title{font-size:18px;font-weight:500;color:#111827;margin:0 0 8px}.empty-subtitle{color:#6b7280;margin:0}.chat-header{padding:16px;border-bottom:1px solid #e5e7eb;background-color:#fff}.chat-header-content{display:flex;align-items:center;gap:12px}.chat-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500}.chat-info h3{font-weight:500;color:#111827;margin:0}.chat-status{font-size:14px;color:#6b7280;margin:0}.messages-container{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}.no-messages-state{text-align:center;padding:32px 0}.no-messages-text{color:#6b7280;margin:0}.message{display:flex}.message.sent{justify-content:flex-end}.message.received{justify-content:flex-start}.message-bubble{max-width:320px;padding:12px 16px;border-radius:16px}.message-bubble.sent{background-color:#3b82f6;color:#fff}.message-bubble.received{background-color:#f3f4f6;color:#111827}.message-text{font-size:14px;margin:0 0 4px}.message-time{font-size:12px;margin:0}.message-time.sent{color:#bfdbfe}.message-time.received{color:#6b7280}.message-input-container{padding:16px;border-top:1px solid #e5e7eb;background-color:#fff}.message-form{display:flex;gap:8px}.message-input{flex:1;padding:8px 16px;border:1px solid #d1d5db;border-radius:20px;outline:none;font-size:14px}.message-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.send-button{width:40px;height:40px;background-color:#3b82f6;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.send-button:hover:not(:disabled){background-color:#2563eb}.send-button:disabled{opacity:.5;cursor:not-allowed}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}