| 1 |
- .chat-container[data-v-fa061339]{display:flex;height:100vh}.sidebar[data-v-fa061339]{width:250px;background-color:#08002e;color:#fff;display:flex;flex-direction:column}.sidebar-header[data-v-fa061339]{background-color:#5200a1;font-size:18px;font-weight:700;padding:10px;text-align:center}.contact-list[data-v-fa061339]{list-style-type:none;padding:0;margin:0}.contact-list li[data-v-fa061339]{padding:10px;cursor:pointer;display:flex;align-items:center}.contact-list li.selected[data-v-fa061339]{background-color:#5200a1}.avatar[data-v-fa061339]{width:40px;height:40px;border-radius:50%;margin-right:10px}.contact-info[data-v-fa061339]{display:flex;flex-direction:column}.name[data-v-fa061339]{font-weight:700}.timestamp[data-v-fa061339]{font-size:12px;color:#ccc}.chat-area[data-v-fa061339]{flex:1;background-color:#f5f5f5;padding:10px;overflow-y:auto}.message-bubble[data-v-fa061339]{max-width:70%;margin:10px 0;padding:10px;border-radius:10px;word-wrap:break-word}.message-bubble.sent[data-v-fa061339]{background-color:#5200a1;color:#fff;margin-left:auto}.message-bubble.received[data-v-fa061339]{background-color:#eaeaea;color:#000;margin-right:auto}.input-area[data-v-fa061339]{display:flex;align-items:center;padding:10px;background-color:#fff;border-top:1px solid #ccc}.message-input[data-v-fa061339]{flex:1;margin-right:10px;border-radius:10px}.send-button[data-v-fa061339],.upload-button[data-v-fa061339]{border-radius:10px}
|
