*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#f0f2f5;color:#111b21;line-height:1.5}.whatsapp-simulator{max-width:1200px;margin:0 auto;padding:2rem}.whatsapp-simulator h1{text-align:center;color:#075e54;margin-bottom:1.5rem;font-weight:600;font-size:2rem}.whatsapp-simulator h1 .subtitle{font-size:1rem;font-weight:400;color:#666;display:block;margin-top:.5rem}.app-container{display:flex;flex-direction:row;gap:2rem;justify-content:center}@media(max-width:768px){.app-container{flex-direction:column}}.controls-panel{flex:1;max-width:300px;background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);height:fit-content}@media(max-width:768px){.controls-panel{max-width:100%}}.profile-settings{margin-bottom:1.5rem}.profile-settings .setting-group{margin-bottom:1rem}.profile-settings .setting-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#333;font-size:.9rem}.profile-settings .setting-group input[type=text]{width:100%;padding:.5rem .75rem;border:1px solid #ddd;border-radius:8px;font-size:.9rem;transition:border-color .2s}.profile-settings .setting-group input[type=text]:focus{outline:none;border-color:#128c7e;box-shadow:0 0 0 2px rgba(18,140,126,.2)}.image-upload .profile-preview{width:60px;height:60px;border-radius:50%;background-color:#e9edef;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s}.image-upload .profile-preview .profile-img{width:100%;height:100%;object-fit:cover}.image-upload .profile-preview .camera-icon{position:absolute;background-color:rgba(0,0,0,.5);color:#fff;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.image-upload .profile-preview:hover{transform:scale(1.05)}.image-upload .profile-preview:hover .camera-icon{opacity:1}.action-buttons{display:flex;flex-direction:column;gap:.75rem}.action-buttons .action-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border:none;border-radius:8px;background-color:#128c7e;color:#fff;font-weight:500;cursor:pointer;transition:all .2s;font-size:.9rem}.action-buttons .action-btn:hover{background-color:rgb(13.3518987342,103.8481012658,93.4632911392);transform:translateY(-1px)}.action-buttons .action-btn:active{transform:translateY(0)}.action-buttons .action-btn.clear-btn{background-color:#ff5252}.action-buttons .action-btn.clear-btn:hover{background-color:rgb(255,41.2,41.2)}.phone-container{flex:2;max-width:450px;height:700px;background-color:#fff;border-radius:30px;box-shadow:0 10px 30px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;border:12px solid #111;position:relative}.phone-container:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:50%;height:20px;background-color:#111;border-bottom-left-radius:12px;border-bottom-right-radius:12px;z-index:10}@media(max-width:768px){.phone-container{max-width:100%;height:600px}}.phone-header{background-color:#075e54;padding:.75rem 1rem;display:flex;align-items:center;color:#fff;position:relative;z-index:2}.phone-header .contact-info{display:flex;align-items:center;gap:.75rem}.phone-header .contact-info .contact-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid hsla(0,0%,100%,.2)}.phone-header .contact-info .contact-name{font-weight:500;font-size:1rem}.chat-container{flex:1;position:relative;overflow-y:auto;background-color:#efeae2}.chat-container .chat-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");opacity:.15;z-index:0}.chat-container .messages-container{position:relative;z-index:1;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.message{max-width:80%;padding:.5rem .75rem;border-radius:.75rem;position:relative;word-wrap:break-word;white-space:pre-wrap;box-shadow:0 1px .5px rgba(0,0,0,.1);animation:fadeIn .2s ease-out}.message.user-message{align-self:flex-end;background-color:#dcf8c6;border-bottom-right-radius:.25rem;margin-right:.5rem}.message.contact-message{align-self:flex-start;background-color:#fff;border-bottom-left-radius:.25rem;margin-left:.5rem}.message .message-image{width:100%;border-radius:.5rem;overflow:hidden;margin-bottom:.5rem}.message .message-image img{width:100%;display:block;max-height:250px;object-fit:cover}.message .message-text{font-size:.9rem;line-height:1.4}.message .message-meta{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;margin-top:.25rem;font-size:.7rem;color:#667781}.message .message-meta .message-time{margin-right:auto}.message .message-meta .message-status{display:flex;align-items:center}.message .message-meta .message-status .loading-icon{animation:spin 1s linear infinite}.message .message-meta .message-status .check-icon{width:16px;height:11px;fill:#667781}.message .message-meta .message-status .check-icon.read{fill:#53bdeb}.message .message-meta .delete-message{opacity:0;background:none;border:none;cursor:pointer;color:#667781;transition:all .2s;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%}.message .message-meta .delete-message:hover{color:#ff5252;background-color:rgba(0,0,0,.05)}.message:hover .delete-message{opacity:1}.input-container{border-top:1px solid #e0e0e0;background-color:#f0f0f0;padding:.75rem;position:relative;z-index:2}.input-container .sender-toggle{display:flex;margin-bottom:.75rem;background-color:#fff;border-radius:.5rem;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1)}.input-container .sender-toggle .toggle-btn{flex:1;padding:.5rem;border:none;background-color:rgba(0,0,0,0);cursor:pointer;transition:all .2s;font-weight:500;font-size:.85rem;position:relative}.input-container .sender-toggle .toggle-btn.active{background-color:#128c7e;color:#fff}.input-container .sender-toggle .toggle-btn:first-child{border-right:1px solid #eee}.message-input-container .image-preview{position:relative;margin-bottom:.75rem;max-height:200px;overflow:hidden;border-radius:.75rem;box-shadow:0 2px 5px rgba(0,0,0,.1)}.message-input-container .image-preview img{width:100%;display:block;max-height:200px;object-fit:cover}.message-input-container .image-preview .remove-image{position:absolute;top:.5rem;right:.5rem;width:1.75rem;height:1.75rem;background-color:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.message-input-container .image-preview .remove-image:hover{background-color:rgba(0,0,0,.8);transform:scale(1.1)}.message-input-container .input-actions{display:flex;align-items:flex-end;gap:.5rem;background-color:#fff;border-radius:1.5rem;padding:.25rem .25rem .25rem .75rem}.message-input-container .input-actions .image-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background-color:rgba(0,0,0,0);cursor:pointer;color:#54656f;flex-shrink:0;transition:all .2s}.message-input-container .input-actions .image-btn:hover{color:#128c7e;background-color:rgba(0,0,0,.05)}.message-input-container .input-actions .image-btn input{display:none}.message-input-container .input-actions textarea{flex:1;padding:.5rem 0;border:none;background-color:rgba(0,0,0,0);resize:none;min-height:2.5rem;max-height:6rem;font-family:inherit;font-size:.9rem;outline:none;overflow-y:auto;line-height:1.4}.message-input-container .input-actions textarea::placeholder{color:#999}.message-input-container .input-actions .send-btn{width:2.5rem;height:2.5rem;border-radius:50%;background-color:#25d366;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:all .2s}.message-input-container .input-actions .send-btn:hover:not(:disabled){background-color:rgb(30.9129032258,176.2870967742,85.2193548387);transform:scale(1.05)}.message-input-container .input-actions .send-btn:active:not(:disabled){transform:scale(.95)}.message-input-container .input-actions .send-btn:disabled{background-color:#ccc;cursor:not-allowed;opacity:.7}.message-input-container .input-actions .send-btn .loading-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}