.zap-wrapper { font-family: Helvetica, Arial, sans-serif; display: flex; height: 650px; border: 1px solid #ddd; background-color: #f0f2f5; max-width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.zap-sidebar { width: 35%; background: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; }
.zap-header { background: #f0f2f5; padding: 10px 16px; height: 60px; display: flex; align-items: center; border-bottom: 1px solid #e0e0e0; }
.zap-search { padding: 8px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.zap-search input { width: 95%; padding: 7px; border-radius: 8px; border: 1px solid #f0f2f5; background: #f0f2f5; }
.zap-contact-list { overflow-y: auto; flex: 1; }
.contact-item { padding: 10px 15px; border-bottom: 1px solid #f5f5f5; cursor: pointer; display: flex; align-items: center; transition: 0.2s; }
.contact-item:hover { background-color: #f5f6f6; }
.contact-item.active { background-color: #f0f2f5; }
.contact-avatar { width: 45px; height: 45px; background: #dfe5e7; border-radius: 50%; margin-right: 15px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-weight: bold; font-size: 16px; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-last-msg { font-size: 13px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.zap-chat-area { width: 65%; display: flex; flex-direction: column; background-color: #efeae2; background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); }
.zap-chat-header { background: #f0f2f5; padding: 10px 16px; height: 60px; display: flex; align-items: center; border-bottom: 1px solid #d1d7db; }
.zap-messages-box { flex: 1; padding: 20px 40px; overflow-y: auto; display: flex; flex-direction: column; }
.msg-row { display: flex; margin-bottom: 8px; width: 100%; }
.msg-bubble { padding: 6px 9px 8px 9px; border-radius: 7.5px; max-width: 70%; font-size: 14.2px; line-height: 19px; color: #111b21; box-shadow: 0 1px 0.5px rgba(11,20,26,.13); position: relative; word-wrap: break-word; }
.msg-in { justify-content: flex-start; }
.msg-in .msg-bubble { background: #ffffff; border-top-left-radius: 0; }
.msg-out { justify-content: flex-end; }
.msg-out .msg-bubble { background: #d9fdd3; border-top-right-radius: 0; }
.msg-time { font-size: 11px; color: #667781; float: right; margin-top: 5px; margin-left: 10px; }
.zap-footer { background: #f0f2f5; padding: 10px; display: flex; align-items: center; }
.zap-input { flex: 1; padding: 12px; border: none; border-radius: 8px; margin: 0 10px; outline: none; font-size: 15px; }