body { margin: 0; font-family: Arial, sans-serif; background: #e5ddd5; height: 100vh; }
.container { display: flex; height: 100vh; max-width: 1400px; margin: 0 auto; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); }

/* Sidebar */
.sidebar { width: 30%; border-right: 1px solid #ddd; display: flex; flex-direction: column; background: #fff; }
.header { padding: 15px; background: #f0f2f5; font-weight: bold; border-bottom: 1px solid #ddd; }
.contact-item { padding: 15px; border-bottom: 1px solid #f0f2f5; cursor: pointer; transition: 0.2s; }
.contact-item:hover { background: #f5f6f6; }
.contact-item.active { background: #ebebeb; }
.contact-name { font-weight: bold; display: block; }
.contact-phone { font-size: 0.8em; color: #666; }

/* Chat Area */
.chat-area { width: 70%; display: flex; flex-direction: column; background: #efeae2; }
.chat-header { padding: 15px; background: #f0f2f5; border-bottom: 1px solid #ddd; font-weight: bold; }
.messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

/* Message Bubbles */
.message { max-width: 60%; padding: 10px 15px; border-radius: 7px; font-size: 14px; position: relative; word-wrap: break-word; }
.inbound { align-self: flex-start; background: #fff; border-top-left-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.outbound { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.msg-time { font-size: 0.7em; color: #999; display: block; text-align: right; margin-top: 5px; }

/* Input */
.input-area { padding: 10px; background: #f0f2f5; display: flex; gap: 10px; }
input { flex: 1; padding: 10px; border-radius: 20px; border: 1px solid #fff; outline: none; }
button { padding: 10px 20px; border-radius: 20px; border: none; background: #008069; color: white; cursor: pointer; font-weight: bold; }
button:disabled { background: #ccc; cursor: not-allowed; }