*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f5f5f5;color:#333}#app{min-height:100vh;display:flex;flex-direction:column}.login-container[data-v-02bc10f8]{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}.login-form[data-v-02bc10f8]{background:white;padding:2rem;border-radius:10px;box-shadow:0 10px 25px #0003;width:100%;max-width:400px}.login-form h2[data-v-02bc10f8]{text-align:center;margin-bottom:.5rem;color:#333}.login-form p[data-v-02bc10f8]{text-align:center;margin-bottom:1.5rem;color:#666}.input-group[data-v-02bc10f8]{margin-bottom:1rem}.input-group label[data-v-02bc10f8]{display:block;margin-bottom:.5rem;font-weight:700;color:#333}.input-group input[data-v-02bc10f8]{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem}.input-group input[data-v-02bc10f8]:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.login-btn[data-v-02bc10f8]{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:opacity .3s}.login-btn[data-v-02bc10f8]:hover:not(:disabled){opacity:.9}.login-btn[data-v-02bc10f8]:disabled{opacity:.6;cursor:not-allowed}.error-message[data-v-02bc10f8]{margin-top:1rem;padding:.75rem;background-color:#ffebee;color:#c62828;border-radius:5px;text-align:center;font-weight:500}@media (max-width: 480px){.login-form[data-v-02bc10f8]{padding:1.5rem}}.chat-container[data-v-cfcebdb8]{display:flex;height:100vh;background-color:#f0f2f5}.sidebar[data-v-cfcebdb8]{width:300px;background-color:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar .user-info[data-v-cfcebdb8]{padding:20px;border-bottom:1px solid #e0e0e0}.sidebar .user-info h3[data-v-cfcebdb8]{margin:0 0 5px;font-size:1.2em}.sidebar .user-info .user-id[data-v-cfcebdb8]{font-size:.8em;color:#666;word-break:break-all}.sidebar .chat-options[data-v-cfcebdb8]{padding:15px;border-bottom:1px solid #e0e0e0}.sidebar .chat-options .btn[data-v-cfcebdb8]{display:block;width:100%;margin-bottom:10px}.sidebar .navigation[data-v-cfcebdb8]{display:flex;border-bottom:1px solid #e0e0e0}.sidebar .navigation button[data-v-cfcebdb8]{flex:1;padding:12px;border:none;background:none;cursor:pointer;font-weight:500}.sidebar .navigation button.active[data-v-cfcebdb8]{border-bottom:2px solid #0084ff;color:#0084ff}.sidebar .content-area[data-v-cfcebdb8]{flex:1;overflow-y:auto}.sidebar .content-area h4[data-v-cfcebdb8]{padding:15px;margin:0;font-size:1em;color:#666}.sidebar .content-area .contact-item[data-v-cfcebdb8],.sidebar .content-area .group-item[data-v-cfcebdb8],.sidebar .content-area .user-item[data-v-cfcebdb8]{display:flex;align-items:center;padding:10px 15px;cursor:pointer;border-bottom:1px solid #f0f2f5}.sidebar .content-area .contact-item[data-v-cfcebdb8]:hover,.sidebar .content-area .group-item[data-v-cfcebdb8]:hover,.sidebar .content-area .user-item[data-v-cfcebdb8]:hover{background-color:#f5f7fa}.sidebar .content-area .contact-item .contact-avatar[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-avatar[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-avatar[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-avatar[data-v-cfcebdb8],.sidebar .content-area .group-item .group-avatar[data-v-cfcebdb8],.sidebar .content-area .group-item .user-avatar[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-avatar[data-v-cfcebdb8],.sidebar .content-area .user-item .group-avatar[data-v-cfcebdb8],.sidebar .content-area .user-item .user-avatar[data-v-cfcebdb8]{width:40px;height:40px;border-radius:50%;background-color:#0084ff;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:10px}.sidebar .content-area .contact-item .contact-details[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details[data-v-cfcebdb8]{flex:1}.sidebar .content-area .contact-item .contact-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .contact-details .group-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .contact-details .user-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details .group-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details .user-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details .group-name[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details .user-name[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details .group-name[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details .user-name[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details .group-name[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details .user-name[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details .group-name[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details .user-name[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details .group-name[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details .user-name[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details .group-name[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details .user-name[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details .contact-name[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details .group-name[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details .user-name[data-v-cfcebdb8]{font-weight:500;display:flex;align-items:center;gap:6px}.sidebar .content-area .contact-item .contact-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .contact-details .group-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .contact-details .user-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details .group-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .group-details .user-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details .group-id[data-v-cfcebdb8],.sidebar .content-area .contact-item .user-details .user-id[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details .group-id[data-v-cfcebdb8],.sidebar .content-area .group-item .contact-details .user-id[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details .group-id[data-v-cfcebdb8],.sidebar .content-area .group-item .group-details .user-id[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details .group-id[data-v-cfcebdb8],.sidebar .content-area .group-item .user-details .user-id[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details .group-id[data-v-cfcebdb8],.sidebar .content-area .user-item .contact-details .user-id[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details .group-id[data-v-cfcebdb8],.sidebar .content-area .user-item .group-details .user-id[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details .contact-id[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details .group-id[data-v-cfcebdb8],.sidebar .content-area .user-item .user-details .user-id[data-v-cfcebdb8]{font-size:.8em;color:#666}.sidebar .content-area .contact-item .unread-badge[data-v-cfcebdb8],.sidebar .content-area .group-item .unread-badge[data-v-cfcebdb8],.sidebar .content-area .user-item .unread-badge[data-v-cfcebdb8]{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:#e42525;color:#fff;font-size:.7em;font-weight:700;border-radius:9px;line-height:1}.main-chat[data-v-cfcebdb8]{flex:1;display:flex;flex-direction:column}.main-chat .welcome-screen[data-v-cfcebdb8]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#666}.main-chat .welcome-screen h2[data-v-cfcebdb8]{margin-bottom:10px;color:#333}.main-chat .chat-room[data-v-cfcebdb8]{display:flex;flex-direction:column;height:100%}.main-chat .chat-room .chat-header[data-v-cfcebdb8]{padding:15px 20px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;background-color:#fff}.main-chat .chat-room .chat-header h3[data-v-cfcebdb8]{margin:0;font-size:1.2em;display:flex;align-items:center}.main-chat .chat-room .chat-header h3 .room-id[data-v-cfcebdb8]{font-size:.7em;font-weight:400;color:#999;margin-left:8px}.main-chat .chat-room .chat-header h3 .copy-id-btn[data-v-cfcebdb8]{margin-left:6px;background:none;border:none;cursor:pointer;font-size:.85em;padding:2px 5px;border-radius:4px;opacity:.6;transition:opacity .2s}.main-chat .chat-room .chat-header h3 .copy-id-btn[data-v-cfcebdb8]:hover{opacity:1}.main-chat .chat-room .chat-header .chat-actions .btn[data-v-cfcebdb8]{padding:5px 10px;font-size:.9em}.main-chat .chat-room .messages-container[data-v-cfcebdb8]{flex:1;overflow-y:auto;padding:20px;background-color:#f0f2f5}.main-chat .chat-room .messages-container .message-wrapper.own[data-v-cfcebdb8]{text-align:right}.main-chat .chat-room .messages-container .message-wrapper .message[data-v-cfcebdb8]{display:inline-block;margin-bottom:15px;max-width:70%}.main-chat .chat-room .messages-container .message-wrapper .message.own-message .message-content[data-v-cfcebdb8]{background-color:#0084ff;color:#fff;border-bottom-right-radius:0}.main-chat .chat-room .messages-container .message-wrapper .message.own-message .message-header[data-v-cfcebdb8]{justify-content:flex-end}.main-chat .chat-room .messages-container .message-wrapper .message.own-message .message-header .sender[data-v-cfcebdb8]{color:#0084ff;font-weight:500}.main-chat .chat-room .messages-container .message-wrapper .message .message-header[data-v-cfcebdb8]{display:flex;justify-content:space-between;margin-bottom:5px;font-size:.8em}.main-chat .chat-room .messages-container .message-wrapper .message .message-header .sender[data-v-cfcebdb8]{font-weight:500;color:#666}.main-chat .chat-room .messages-container .message-wrapper .message .message-header .timestamp[data-v-cfcebdb8]{color:#999;margin-left:10px}.main-chat .chat-room .messages-container .message-wrapper .message .message-content[data-v-cfcebdb8]{padding:10px 15px;background-color:#fff;border-radius:18px 18px 18px 0;box-shadow:0 1px 1px #0000001a}.main-chat .chat-room .message-input-container[data-v-cfcebdb8]{padding:15px;background-color:#fff;border-top:1px solid #e0e0e0;display:flex}.main-chat .chat-room .message-input-container .message-input[data-v-cfcebdb8]{flex:1;padding:12px 15px;border:1px solid #e0e0e0;border-radius:24px;outline:none}.main-chat .chat-room .message-input-container .message-input[data-v-cfcebdb8]:focus{border-color:#0084ff}.main-chat .chat-room .message-input-container .send-button[data-v-cfcebdb8]{margin-left:10px;padding:12px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:24px;cursor:pointer}.main-chat .chat-room .message-input-container .send-button[data-v-cfcebdb8]:hover{background-color:#0077e6}.main-chat .chat-room .message-input-container .image-upload-btn[data-v-cfcebdb8]{margin:0 6px;padding:8px 12px;background:none;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:1.2em;transition:background .2s}.main-chat .chat-room .message-input-container .image-upload-btn[data-v-cfcebdb8]:hover{background:#f0f0f0}.message-image[data-v-cfcebdb8]{max-width:100%;max-height:800px;object-fit:contain;border-radius:12px;cursor:pointer;display:block}@media (max-width: 768px){.message-image[data-v-cfcebdb8]{max-height:300px}}.image-preview-overlay[data-v-cfcebdb8]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:2000;cursor:pointer}.image-preview-overlay .image-preview-img[data-v-cfcebdb8]{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px}.image-preview-overlay .image-preview-close[data-v-cfcebdb8]{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.2em;cursor:pointer;display:flex;align-items:center;justify-content:center}.image-preview-overlay .image-preview-close[data-v-cfcebdb8]:hover{background:rgba(255,255,255,.4)}.modal-overlay[data-v-cfcebdb8]{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal[data-v-cfcebdb8]{background-color:#fff;padding:25px;border-radius:10px;width:90%;max-width:400px}.modal h3[data-v-cfcebdb8]{margin-top:0;margin-bottom:20px}.modal .modal-input[data-v-cfcebdb8]{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;margin-bottom:15px}.modal .modal-actions[data-v-cfcebdb8]{display:flex;justify-content:flex-end;gap:10px}.modal .invite-tabs[data-v-cfcebdb8]{display:flex;gap:8px;margin-bottom:15px}.modal .invite-tabs button[data-v-cfcebdb8]{flex:1;padding:8px;border:1px solid #ddd;background:#f5f5f5;border-radius:5px;cursor:pointer}.modal .invite-tabs button.active[data-v-cfcebdb8]{background:#0084ff;color:#fff;border-color:#0084ff}.modal .select-group-row[data-v-cfcebdb8]{margin-bottom:15px}.modal .select-group-row .full-width-select[data-v-cfcebdb8]{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;font-size:1rem}.modal .invite-section[data-v-cfcebdb8]{margin-bottom:15px}.modal .invite-section .invite-label[data-v-cfcebdb8]{font-weight:600;margin-bottom:8px;color:#333}.modal .invite-link-box[data-v-cfcebdb8]{display:flex;align-items:center;gap:8px;background:#f5f5f5;padding:10px;border-radius:5px;word-break:break-all}.modal .invite-link-box code[data-v-cfcebdb8]{flex:1;font-size:.85em;color:#333}.modal .invite-link-box .copy-btn[data-v-cfcebdb8]{padding:6px 12px;background:#0084ff;color:#fff;border:none;border-radius:4px;cursor:pointer;white-space:nowrap}.modal .invite-link-box .copy-btn[data-v-cfcebdb8]:hover{background:#0077e6}.modal .copied-msg[data-v-cfcebdb8]{margin-top:8px;color:#2e7d32;font-size:.9em;font-weight:600}.my-id-description[data-v-cfcebdb8]{color:#666;font-size:.9em;margin-bottom:15px}.add-contact-section[data-v-cfcebdb8],.add-group-section[data-v-cfcebdb8]{padding:10px 15px;border-top:1px solid #e0e0e0;background:#f9f9f9}.add-contact-section .add-contact-input[data-v-cfcebdb8],.add-contact-section .add-group-input[data-v-cfcebdb8],.add-group-section .add-contact-input[data-v-cfcebdb8],.add-group-section .add-group-input[data-v-cfcebdb8]{display:flex;gap:6px}.add-contact-section .add-contact-input input[data-v-cfcebdb8],.add-contact-section .add-group-input input[data-v-cfcebdb8],.add-group-section .add-contact-input input[data-v-cfcebdb8],.add-group-section .add-group-input input[data-v-cfcebdb8]{flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:5px;font-size:.85em}.btn-sm[data-v-cfcebdb8]{padding:8px 14px;background:#0084ff;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:.85em}.btn-sm[data-v-cfcebdb8]:hover:not(:disabled){background:#0077e6}.btn-sm[data-v-cfcebdb8]:disabled{opacity:.6;cursor:not-allowed}.btn[data-v-cfcebdb8]{padding:10px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.btn.btn-primary[data-v-cfcebdb8]{background-color:#0084ff;color:#fff}.btn.btn-primary[data-v-cfcebdb8]:hover{background-color:#0077e6}.btn.btn-secondary[data-v-cfcebdb8]{background-color:#e4e6eb;color:#4b4f56}.btn.btn-secondary[data-v-cfcebdb8]:hover{background-color:#d8dadf}.btn.btn-danger[data-v-cfcebdb8]{background-color:#e42525;color:#fff}.btn.btn-danger[data-v-cfcebdb8]:hover{background-color:#d32f2f}.logout-button[data-v-cfcebdb8]{position:absolute;top:10px;right:14px;padding:8px 15px;background-color:#ff6b6b;color:#fff;border:none;border-radius:5px;cursor:pointer}.logout-button[data-v-cfcebdb8]:hover{background-color:#ff5252}@media (max-width: 768px){.chat-container[data-v-cfcebdb8]{flex-direction:column}.sidebar[data-v-cfcebdb8]{width:100%;height:40vh}.logout-button[data-v-cfcebdb8]{position:static;margin:10px;width:calc(100% - 20px)}}.invite-container[data-v-f4d8b125]{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}.invite-card[data-v-f4d8b125]{background:white;padding:2.5rem;border-radius:16px;box-shadow:0 10px 30px #0003;width:100%;max-width:450px;text-align:center}.loading .spinner[data-v-f4d8b125]{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #667eea;border-radius:50%;margin:0 auto 1rem;animation:spin-f4d8b125 1s linear infinite}.loading p[data-v-f4d8b125]{color:#666}@keyframes spin-f4d8b125{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-state .error-icon[data-v-f4d8b125]{font-size:3rem;margin-bottom:1rem}.error-state h2[data-v-f4d8b125]{color:#c62828;margin-bottom:1.5rem}.invite-info .invite-icon[data-v-f4d8b125]{font-size:3rem;margin-bottom:1rem}.invite-info h2[data-v-f4d8b125]{color:#333;margin-bottom:.5rem}.invite-info p[data-v-f4d8b125]{color:#666;margin-bottom:1rem;font-size:1.1rem}.invite-info p strong[data-v-f4d8b125]{color:#333}.success-state .success-icon[data-v-f4d8b125]{font-size:3rem;margin-bottom:1rem}.success-state h2[data-v-f4d8b125]{color:#2e7d32;margin-bottom:1.5rem}.btn[data-v-f4d8b125]{display:inline-block;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity .2s}.btn.btn-primary[data-v-f4d8b125]{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.btn.btn-primary[data-v-f4d8b125]:hover:not(:disabled){opacity:.9}.btn.btn-primary[data-v-f4d8b125]:disabled{opacity:.6;cursor:not-allowed}