:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}:root{--primary:#08c;--primary-hover:#0077b5;--bg-main:#f0f2f5;--bg-chat:#fff;--user-msg:#dcf8c6;--admin-msg:#fff;--text-main:#111b21;--text-muted:#667781;--border:#e9edef;--shadow:0 1px 2px #0000001a;--wa-green:#00a884;--wa-teal:#075e54;--wa-light-green:#25d366;--wa-vibrant-blue:#08c;--wa-vibrant-orange:#ff9800;--wa-vibrant-red:#ff3b30}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background:var(--bg-main);color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.chat-app{height:100vh;background:#efe7de;flex-direction:column;width:100%;max-width:100%;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;position:relative;overflow:hidden}.chat-header{background:var(--wa-teal);color:#fff;z-index:10;justify-content:space-between;align-items:center;padding:10px 16px;display:flex;box-shadow:0 2px 5px #0000001a}.header-info{align-items:center;gap:12px;display:flex}.header-avatar{color:#fff;background:#08c;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:700;display:flex}.header-name{text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-size:16px;font-weight:600;overflow:hidden}.header-status{color:#4fc3f7;font-size:13px}.header-actions{gap:4px;display:flex}.chat-header .icon-btn{color:#fff}.chat-header .icon-btn:hover{background:#ffffff1a}.icon-btn[title=Audio\ Call]{color:#4caf50!important}.icon-btn[title=Video\ Call]{color:#2196f3!important}.icon-btn[title=More],.icon-btn[title=Emoji]{color:#ffc107!important}.icon-btn[title="Click to record video note"]{color:#f44336!important}.icon-btn[title="Click to record voice note"]{color:#4caf50!important}.icon-btn.primary{color:#2196f3!important}.icon-btn.recording{animation:1.5s infinite pulse;color:red!important}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #ff3b3099}70%{transform:scale(1.1);box-shadow:0 0 0 15px #ff3b3000}to{transform:scale(1);box-shadow:0 0 #ff3b3000}}.chat-messages{background-color:#efe7de;background-repeat:repeat;flex-direction:column;flex:1;gap:8px;padding:20px;transition:all .3s;display:flex;overflow-y:auto}.theme-default{background-color:#efe7de;background-image:url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png)}.theme-dark{background-color:#111b21;background-image:url(https://i.pinimg.com/736x/8c/98/99/8c98994518b575bfd81f75e49585ccb9.jpg)}.theme-blue{background-color:#0b141a;background-image:url(https://i.pinimg.com/originals/97/c0/07/97c00759d90d7ad6702797033d43d1f1.jpg)}.theme-pink{background-color:#1a1a1a;background-image:url(https://i.pinimg.com/originals/ab/ab/60/abab60f06ab52fa7846593e6ae0c9a0b.jpg)}.message{word-wrap:break-word;border-radius:8px;max-width:80%;padding:6px 12px 8px;font-size:14.5px;position:relative;box-shadow:0 1px .5px #00000021}.message.user{background:#dcf8c6;border-top-right-radius:0;align-self:flex-end}.message.admin{background:#fff;border-top-left-radius:0;align-self:flex-start}.message-meta{color:#667781;text-align:right;justify-content:flex-end;align-items:center;gap:4px;margin-top:2px;font-size:11px;display:flex}.chat-input-area{border-top:1px solid var(--border);background:#f0f2f5;align-items:center;gap:12px;padding:10px 16px;display:flex}.input-bar{color:#000;background:#fff;border:1px solid #fff;border-radius:24px;outline:none;flex:1;min-width:0;padding:10px 16px;font-size:15px;box-shadow:0 1px 1px #0000000d}.icon-btn{cursor:pointer;color:#54656f;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn svg{width:26px;height:26px}.icon-btn:hover{background:#00000014}.icon-btn.primary{background:var(--wa-green);color:#fff;width:45px;height:45px}.icon-btn.primary:hover{background:#008f72;transform:scale(1.05)}.input-actions{align-items:center;gap:4px;display:flex}.icon-btn[title=Attach\ File]{color:#ff9800}.icon-btn[title=Emoji]{color:#ffc107}.icon-btn[title=Voice\ Note]{color:#2196f3}.icon-btn[title=Video\ Note]{color:#9c27b0}.video-note-container{border:4px solid var(--wa-green);background:#000;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;margin:4px 0;display:flex;overflow:hidden;box-shadow:0 4px 12px #0003}.video-note{object-fit:cover;width:100%;height:100%}.icon-btn.recording{animation:1.2s ease-in-out infinite pulse;color:#fff!important;background:var(--wa-vibrant-red)!important}.emoji-picker-container,.gif-picker-container{z-index:1000;background:#fff;border-radius:8px;position:absolute;bottom:50px;left:0;overflow:hidden;box-shadow:0 5px 15px #0003}.gif-picker-container{flex-direction:column;width:300px;height:400px;padding:10px;display:flex}.gif-search{color:#000;border:1px solid #ddd;border-radius:4px;width:100%;margin-bottom:10px;padding:8px}.gif-grid{flex:1;grid-template-columns:repeat(2,1fr);gap:8px;display:grid;overflow-y:auto}.gif-grid img{object-fit:cover;cursor:pointer;border-radius:4px;width:100%;height:100px;transition:transform .2s}.gif-grid img:hover{transform:scale(1.05)}.theme-picker-overlay{z-index:2000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.theme-picker-card{background:#fff;border-radius:12px;width:90%;max-width:400px;padding:24px;box-shadow:0 10px 25px #0003}.theme-picker-card h3{color:var(--wa-teal);text-align:center;margin:0 0 20px}.theme-list{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;display:grid}.theme-option{text-align:center;cursor:pointer;border:2px solid #eee;border-radius:8px;padding:16px;font-weight:600;transition:all .2s}.theme-option:hover{border-color:var(--wa-green);background:#f0fdf4}.theme-option.active{border-color:var(--wa-green);color:var(--wa-green);background:#f0fdf4}.btn-close{background:var(--wa-teal);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;padding:12px;font-weight:600}.btn-close:hover{background:#054d44}.more-menu{z-index:100;background:#fff;border-radius:4px;min-width:150px;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 2px 5px #0003}.menu-item{color:#3b4a54;cursor:pointer;align-items:center;gap:12px;padding:12px 20px;font-size:14.5px;transition:background .2s;display:flex}.menu-item:hover{background:#f5f6f6}.emoji-picker{z-index:100;border:1px solid var(--border);background:#fff;border-radius:16px;grid-template-columns:repeat(6,1fr);gap:10px;width:280px;margin-bottom:15px;padding:16px;display:grid;position:absolute;bottom:100%;left:0;box-shadow:0 8px 30px #0003}.emoji-picker span{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:4px;font-size:28px;transition:all .2s;display:flex}.emoji-picker span:hover{background:#f0f2f5;transform:scale(1.2)}.call-overlay{z-index:2000;background:#0b141a;flex-direction:column;display:flex;position:fixed;inset:0}.call-overlay.incoming{background:#0b141af2;justify-content:center;align-items:center}.incoming-call-card{color:#fff;text-align:center;background:#202c33;border-radius:24px;width:85%;max-width:320px;padding:40px;box-shadow:0 20px 40px #0006}.avatar{background:var(--wa-teal);color:#fff;border:4px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;margin:0 auto 24px;font-size:40px;font-weight:700;display:flex}.call-actions{justify-content:center;gap:50px;margin-top:40px;display:flex}.btn-accept{cursor:pointer;background:#25d366;border:none;border-radius:50%;justify-content:center;align-items:center;width:65px;height:65px;transition:transform .2s;display:flex;box-shadow:0 8px 16px #25d3664d}.btn-danger{cursor:pointer;background:#f15c5c;border:none;border-radius:50%;justify-content:center;align-items:center;width:65px;height:65px;transition:transform .2s;display:flex;box-shadow:0 8px 16px #f15c5c4d}.btn-accept:hover,.btn-danger:hover{transform:scale(1.1)}.video-container{background:#000;flex:1;position:relative}.remote-video{object-fit:cover;width:100%;height:100%}.local-video{object-fit:cover;border:2px solid #ffffff4d;border-radius:12px;width:110px;height:165px;position:absolute;top:30px;right:20px;box-shadow:0 8px 20px #00000080}.call-info{text-align:center;color:#fff;pointer-events:none;position:absolute;top:50px;left:0;right:0}.call-info h3{text-shadow:0 2px 10px #00000080;margin:0;font-size:24px;font-weight:500}.call-info p{opacity:.9;margin:8px 0 0;font-size:16px}.call-controls{background:linear-gradient(#0000,#000c);justify-content:center;align-items:center;padding:40px;display:flex;position:absolute;bottom:0;left:0;right:0}.btn-control{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;color:#fff;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;margin:0 15px;transition:all .2s;display:flex}.btn-control:hover{background:#ffffff40}.btn-control.active{color:#0b141a;background:#fff}.btn-danger.large{background:#f15c5c;width:75px;height:75px}.file-msg{color:#111b21;background:#0000000d;border-radius:8px;align-items:center;gap:10px;margin-bottom:4px;padding:10px;text-decoration:none;display:flex}.audio-msg{background:#00000008;border-radius:8px;align-items:center;gap:8px;margin-bottom:4px;padding:8px;display:flex}audio{filter:sepia(20%)saturate(70%)grayscale()contrast(90%)invert(0%);height:36px}@media (max-width:600px){.chat-header{padding:8px 12px}.header-avatar{width:32px;height:32px;font-size:14px}.header-name{max-width:100px;font-size:14px}.header-status{font-size:11px}.header-actions{flex-shrink:0;gap:2px}.header-info{flex:1;gap:8px;min-width:0}.chat-header h3{font-size:15px}.chat-messages{padding:12px}.message{max-width:90%;font-size:14px}.chat-input-area{gap:8px;padding:8px 10px}.input-bar{padding:8px 12px;font-size:14px}.icon-btn svg{width:22px;height:22px}.icon-btn.primary{width:40px;height:40px}.emoji-picker-container,.gif-picker-container{border-radius:12px 12px 0 0;width:100%;position:fixed;bottom:60px;left:0;right:0}.emoji-picker{box-sizing:border-box;grid-template-columns:repeat(8,1fr);width:100%}.gif-picker-container{height:350px}.video-note-container{width:160px;height:160px}.audio-msg audio{width:160px}.incoming-call-card{width:90%;padding:24px}.avatar{width:80px;height:80px;font-size:32px}.call-actions{gap:30px;margin-top:30px}.btn-accept,.btn-danger{width:56px;height:56px}.local-video{width:90px;height:135px;top:20px;right:15px}.call-info h3{font-size:20px}.call-controls{padding:20px}.btn-control{width:48px;height:48px;margin:0 8px}.btn-danger.large{width:64px;height:64px}}