*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f0f2f5;height:100vh;overflow:hidden}#root{height:100vh}.app{display:flex;height:100vh;max-width:1400px;margin:0 auto;background:#fff;box-shadow:0 1px 3px #00000014}.chat-list{width:350px;min-width:350px;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;background:#fff}.chat-list-header{padding:16px 20px;background:#075e54;color:#fff}.chat-list-header h2{font-size:18px;font-weight:600}.chat-list-items{flex:1;overflow-y:auto}.empty-state{padding:40px 20px;text-align:center;color:#999;font-size:14px}.chat-item{display:flex;align-items:center;padding:12px 20px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background .15s}.chat-item:hover{background:#f5f5f5}.chat-item.active{background:#ebebeb}.chat-item-avatar{width:44px;height:44px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;margin-right:12px;flex-shrink:0}.chat-item-info{flex:1;min-width:0}.chat-item-name{font-size:15px;font-weight:500;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item-preview{font-size:13px;color:#667;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.outbound-indicator{color:#999}.chat-item-time{font-size:11px;color:#999;white-space:nowrap;margin-left:8px}.chat-area{flex:1;display:flex;flex-direction:column;min-width:0}.chat-window{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window.empty{align-items:center;justify-content:center;color:#999;font-size:16px;background:#f0f2f5}.chat-window-header{padding:12px 20px;background:#075e54;color:#fff;border-bottom:1px solid #e0e0e0}.chat-window-header h3{font-size:16px;font-weight:500}.chat-window-messages{flex:1;overflow-y:auto;padding:20px;background:#e5ddd5;display:flex;flex-direction:column;gap:4px}.message{display:flex;max-width:65%}.message.inbound{align-self:flex-start}.message.outbound{align-self:flex-end}.message-bubble{padding:8px 12px;border-radius:8px;position:relative;word-wrap:break-word}.message.inbound .message-bubble{background:#fff;border-top-left-radius:0}.message.outbound .message-bubble{background:#dcf8c6;border-top-right-radius:0}.message-bubble p{font-size:14px;line-height:1.4;color:#303030}.message-time{display:block;font-size:11px;color:#999;text-align:right;margin-top:4px}.message-status.read{color:#53bdeb}.message-status.delivered{color:#999}.message-input{display:flex;padding:12px 16px;background:#f0f2f5;border-top:1px solid #e0e0e0;gap:10px}.message-input input{flex:1;padding:10px 16px;border:none;border-radius:24px;font-size:14px;outline:none;background:#fff}.message-input button{padding:10px 24px;background:#075e54;color:#fff;border:none;border-radius:24px;font-size:14px;cursor:pointer;font-weight:500;transition:background .15s}.message-input button:hover:not(:disabled){background:#064e46}.message-input button:disabled{opacity:.5;cursor:not-allowed}