:root{--whatsapp-green: #128C7E;--whatsapp-light-green: #25D366;--whatsapp-teal: #075E54;--whatsapp-blue: #34B7F1;--chat-bg: #e5ddd5;--outgoing-bg: #dcf8c6;--incoming-bg: #ffffff;--message-text: #303030;--message-time: #667781;--header-bg: #8128aa;--input-bg: #FFFFFF;--status-color: #b3b3b3;--check-color: #4fc3f7;--double-check-color: #4fc3f7}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:#373737;display:flex;justify-content:center;align-items:center;min-height:100vh}.chat-container{display:flex;flex-direction:column;max-width:1000px;width:100%;height:100vh;background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 1px #0000000f,0 2px 5px #0003}.chat-header{background-color:var(--header-bg);color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center}.contact-info{display:flex;align-items:center}.back-button{display:none;margin-right:10px;font-size:1.2em}.contact-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;margin-right:15px}.contact-avatar img{width:100%;height:100%;object-fit:cover}.contact-details{display:flex;flex-direction:column}.contact-name{font-weight:500;font-size:16px}.contact-status{font-size:13px;color:var(--status-color)}.header-buttons{display:flex;gap:24px}.header-buttons i{font-size:18px;cursor:pointer}.chat-messages{flex:1;background-color:#000;background-image:radial-gradient(circle,#8128aab3,#000);background-repeat:repeat;padding:20px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.chat-messages::-webkit-scrollbar{display:none}.message{display:flex;margin-bottom:8px;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.received{justify-content:flex-start}.message.sent{justify-content:flex-end}.message-content{max-width:65%;padding:8px 12px;border-radius:7.5px;position:relative;box-shadow:0 1px .5px #00000021}.received .message-content{background-color:var(--incoming-bg);border-top-left-radius:0}.sent .message-content{background-color:var(--outgoing-bg);border-top-right-radius:0}.message-text{color:var(--message-text);font-size:14px;line-height:1.4;word-wrap:break-word}.message-time-container{display:flex;align-items:center;justify-content:flex-end;font-size:11px;color:var(--message-time);margin-top:4px}.message-time{margin-right:4px}.double-check{width:16px;height:16px;display:inline-block;background-image:url(/assets/check-DMZdIS4g.svg);background-size:contain;background-repeat:no-repeat;background-position:center}.typing-indicator{display:flex;padding:12px 16px;align-items:center;background-color:var(--incoming-bg);border-radius:0 7.5px 7.5px;margin-bottom:8px;width:fit-content;max-width:65%}.typing-indicator span{height:8px;width:8px;background-color:#b6b6b6;border-radius:50%;display:inline-block;margin:0 1px;animation:typing 1.4s infinite ease-in-out}.typing-indicator span:nth-child(1){animation-delay:0s}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.message-image{max-width:250px;border-radius:6px;margin-bottom:5px}.audio-player{display:flex;align-items:center;background-color:transparent;width:280px}.play-button{background-color:var(--whatsapp-light-green);color:#fff;width:34px;height:34px;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-right:10px;cursor:pointer;flex-shrink:0}.play-button i{font-size:14px}.audio-track{flex-grow:1}.audio-progress{height:4px;background-color:#e1e1e1;border-radius:2px;position:relative;margin-bottom:4px;cursor:pointer}.audio-progress-filled{height:100%;background-color:var(--whatsapp-light-green);border-radius:2px;width:0%}.audio-duration{font-size:11px;color:var(--message-time)}.link-button{background-color:var(--whatsapp-light-green);color:#fff;padding:10px 15px;border-radius:5px;text-decoration:none;display:inline-block;margin-top:5px;font-weight:500;transition:background-color .2s}.link-button:hover{background-color:var(--whatsapp-green)}.chat-input{background-color:#f0f0f0;padding:10px}.input-wrapper{display:flex;align-items:center;background-color:var(--input-bg);border-radius:25px;padding:5px 10px}.emoji-button,.attachment-button,.voice-button{padding:10px;color:#777;cursor:pointer}.input-field{flex:1}.input-field input{width:100%;padding:10px 5px;border:none;outline:none;font-size:15px}.voice-button{color:var(--whatsapp-green)}@media (max-width: 768px){body{padding:0}.chat-container{height:100vh;width:100%;border-radius:0}.back-button{display:block}.message-content{max-width:85%}.header-buttons i:not(:last-child){display:none}}.response-buttons{display:flex;flex-direction:column;gap:10px;padding:5px;width:100%}.response-button{background-color:var(--header-bg);color:#fff;border:none;border-radius:20px;padding:12px 20px;font-size:14px;cursor:pointer;transition:all .3s ease;max-width:90%;margin-left:auto;margin-right:0;text-align:center;font-weight:700}.response-button:hover{opacity:.9;transform:scale(1.01)}.response-button:active{transform:scale(.98)}.name-input-container{display:flex;padding:10px 2px;margin-bottom:10px;width:100%;box-sizing:border-box;justify-content:flex-end}.name-input{flex:0 1 auto;width:50%;max-width:300px;padding:12px 16px;border:1px solid #e2e2e2;border-radius:20px;font-size:14px;outline:none;margin-right:10px;background-color:var(--input-bg)}.name-send-button{width:40px;height:40px;border-radius:50%;background-color:var(--header-bg);color:#fff;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease}.name-send-button:hover{background-color:var(--whatsapp-light-green)}.name-send-button:active{transform:scale(.95)}@media (max-width: 768px){.name-input{width:70%}}.response-options{display:none;flex-direction:column;gap:10px;margin:10px 0;padding:10px;width:100%}.response-option{background-color:#128c7e;color:#fff;border:none;border-radius:20px;padding:10px 20px;font-size:14px;cursor:pointer;transition:background-color .3s;text-align:center;max-width:100%;word-wrap:break-word}.response-option:hover{background-color:#0c6b5e}.image-container img,.chat-image{width:100%;height:auto;object-fit:contain}