:root{--wa-bg-dark:#0b141a;--wa-bg-panel:#111b21;--wa-bg-chat:#0b141a;--wa-bg-input:#1e2a30;--wa-bubble-out:#005c4b;--wa-bubble-out-hover:#006d59;--wa-bubble-in:#1f2c34;--wa-bubble-in-hover:#25343d;--wa-header:#1f2c34;--wa-border:#2a3942;--wa-green:#00a884;--wa-green-light:#25d366;--wa-green-glow:#00a88426;--wa-text-primary:#e9edef;--wa-text-secondary:#8696a0;--wa-text-muted:#667781;--wa-text-time:#ffffff8c;--wa-link:#53bdeb;--wa-blue-check:#53bdeb;--wa-system-bg:#122934e6;--wa-system-text:#8bafbf;--wa-deleted-text:#8696a0;--wa-danger:#ea4848;--wa-media-overlay:#00000080;--wa-doodle-opacity:.04;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs:.6875rem;--font-size-sm:.8125rem;--font-size-base:.9375rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--space-3xl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-bubble:7.5px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 2px 8px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 40px var(--wa-green-glow);--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--header-height:60px;--max-bubble-width:65%;--sidebar-width:360px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);background:var(--wa-bg-dark);color:var(--wa-text-primary);width:100vw;height:100vh;overflow:hidden}#app{flex-direction:column;width:100vw;height:100vh;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--wa-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--wa-text-muted)}.landing{background:linear-gradient(135deg,#0b141a 0%,#111b21 50%,#0d2018 100%);flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.landing:before{content:"";pointer-events:none;background:radial-gradient(at 30% 20%,#00a88414 0%,#0000 50%),radial-gradient(at 70% 80%,#25d3660f 0%,#0000 50%);position:absolute;inset:0}.landing-content{z-index:1;text-align:center;max-width:560px;padding:var(--space-2xl);animation:.8s fadeInUp;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.landing-icon{width:100px;height:100px;margin:0 auto var(--space-xl);background:linear-gradient(135deg, var(--wa-green), var(--wa-green-light));box-shadow:var(--shadow-glow), var(--shadow-lg);border-radius:28px;justify-content:center;align-items:center;font-size:48px;animation:3s ease-in-out infinite iconFloat;display:flex}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.landing h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-sm);background:linear-gradient(135deg, var(--wa-text-primary), var(--wa-green-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700}.landing p{font-size:var(--font-size-base);color:var(--wa-text-secondary);margin-bottom:var(--space-2xl);line-height:1.6}.drop-zone{border:2px dashed var(--wa-border);border-radius:var(--radius-xl);width:100%;padding:var(--space-3xl) var(--space-2xl);cursor:pointer;transition:var(--transition-base);background:#00a88408;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.dragover{border-color:var(--wa-green);box-shadow:var(--shadow-glow);background:#00a88414}.drop-zone.dragover{transform:scale(1.02)}.drop-zone-icon{margin-bottom:var(--space-lg);opacity:.7;transition:var(--transition-base);font-size:48px}.drop-zone:hover .drop-zone-icon{opacity:1;transform:scale(1.1)}.drop-zone h3{font-size:var(--font-size-md);margin-bottom:var(--space-xs);font-weight:600}.drop-zone p{font-size:var(--font-size-sm);color:var(--wa-text-muted);margin-bottom:0}.drop-zone input[type=file]{display:none}.loading-overlay{z-index:1000;background:#0b141af2;flex-direction:column;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading-spinner{border:3px solid var(--wa-border);border-top-color:var(--wa-green);width:56px;height:56px;margin-bottom:var(--space-xl);border-radius:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay h3{font-size:var(--font-size-md);margin-bottom:var(--space-sm);font-weight:500}.loading-overlay p{font-size:var(--font-size-sm);color:var(--wa-text-secondary)}.progress-bar-container{background:var(--wa-border);border-radius:var(--radius-full);width:280px;height:4px;margin-top:var(--space-lg);overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--wa-green), var(--wa-green-light));border-radius:var(--radius-full);width:0%;height:100%;transition:width .3s}.chat-app{background:var(--wa-bg-dark);flex-direction:column;width:100vw;height:100vh;display:flex}.chat-header{height:var(--header-height);min-height:var(--header-height);background:var(--wa-header);padding:0 var(--space-lg);align-items:center;gap:var(--space-md);z-index:100;-webkit-user-select:none;user-select:none;border-bottom:1px solid #ffffff0d;display:flex}.header-avatar{background:linear-gradient(135deg, var(--wa-green), #25d366);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:600;display:flex}.header-info{flex:1;min-width:0}.header-name{font-size:var(--font-size-md);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.header-status{font-size:var(--font-size-xs);color:var(--wa-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-actions{align-items:center;gap:var(--space-sm);display:flex}.header-btn{color:var(--wa-text-secondary);cursor:pointer;padding:var(--space-sm);border-radius:var(--radius-full);transition:var(--transition-fast);font-size:var(--font-size-lg);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.header-btn:hover{color:var(--wa-text-primary);background:#ffffff14}.search-container{align-items:center;gap:var(--space-sm);flex:1;max-width:400px;animation:.2s slideInRight;display:flex}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.search-input{background:var(--wa-bg-input);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--wa-text-primary);font-family:var(--font-family);font-size:var(--font-size-sm);transition:var(--transition-fast);border:none;outline:none;flex:1}.search-input::placeholder{color:var(--wa-text-muted)}.search-input:focus{box-shadow:0 0 0 1px var(--wa-green)}.search-results-count{font-size:var(--font-size-xs);color:var(--wa-text-secondary);white-space:nowrap}.search-nav-btn{color:var(--wa-text-secondary);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;padding:4px;font-size:16px;display:flex}.search-nav-btn:hover{color:var(--wa-text-primary)}.chat-body{background:var(--wa-bg-chat);flex:1;position:relative;overflow:hidden auto}.chat-body:before{content:"";opacity:var(--wa-doodle-opacity);pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='30' font-size='16' fill='%23ffffff' opacity='0.5'%3E💬%3C/text%3E%3Ctext x='60' y='80' font-size='14' fill='%23ffffff' opacity='0.4'%3E📱%3C/text%3E%3Ctext x='130' y='40' font-size='12' fill='%23ffffff' opacity='0.3'%3E🔒%3C/text%3E%3Ctext x='30' y='130' font-size='15' fill='%23ffffff' opacity='0.4'%3E📷%3C/text%3E%3Ctext x='100' y='160' font-size='13' fill='%23ffffff' opacity='0.3'%3E🎵%3C/text%3E%3Ctext x='160' y='110' font-size='14' fill='%23ffffff' opacity='0.35'%3E📹%3C/text%3E%3Ctext x='80' y='190' font-size='12' fill='%23ffffff' opacity='0.3'%3E❤️%3C/text%3E%3C/svg%3E");position:absolute;inset:0}.messages-container{z-index:1;padding:var(--space-md) var(--space-xl);padding-bottom:var(--space-2xl);flex-direction:column;max-width:900px;margin:0 auto;display:flex;position:relative}.date-separator{padding:var(--space-md) 0;z-index:10;pointer-events:none;justify-content:center;display:flex;position:sticky;top:0}.date-separator span{background:var(--wa-system-bg);color:var(--wa-system-text);font-size:var(--font-size-xs);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-transform:uppercase;letter-spacing:.03em;padding:5px 12px;font-weight:500}.system-message{padding:var(--space-xs) 0;justify-content:center;display:flex}.system-message span{background:var(--wa-system-bg);color:var(--wa-system-text);font-size:var(--font-size-xs);border-radius:var(--radius-md);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:80%;padding:5px 12px;line-height:1.4}.message-row{margin-bottom:2px;animation:.15s bubbleIn;display:flex}@keyframes bubbleIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.message-row.out{justify-content:flex-end}.message-row.in{justify-content:flex-start}.message-row.sender-change{margin-top:var(--space-md)}.bubble{max-width:var(--max-bubble-width);border-radius:var(--radius-bubble);word-wrap:break-word;overflow-wrap:break-word;line-height:1.35;font-size:var(--font-size-base);padding:6px 7px 8px 9px;position:relative;box-shadow:0 1px .5px #00000021}.message-row.out .bubble{background:var(--wa-bubble-out);border-top-right-radius:0}.message-row.in .bubble{background:var(--wa-bubble-in);border-top-left-radius:0}.message-row.out.has-tail .bubble{border-top-right-radius:0}.message-row.in.has-tail .bubble{border-top-left-radius:0}.message-row.out.has-tail .bubble:before{content:"";background:var(--wa-bubble-out);clip-path:polygon(0 0,0 100%,100% 0);width:8px;height:13px;position:absolute;top:0;right:-8px}.message-row.in.has-tail .bubble:before{content:"";background:var(--wa-bubble-in);clip-path:polygon(100% 0,0 0,100% 100%);width:8px;height:13px;position:absolute;top:0;left:-8px}.bubble-sender{font-size:var(--font-size-xs);color:var(--wa-green-light);margin-bottom:2px;font-weight:600}.bubble-text{white-space:pre-wrap;word-break:break-word}.bubble-text a{color:var(--wa-link);text-decoration:none}.bubble-text a:hover{text-decoration:underline}.bubble-meta{float:right;justify-content:flex-end;align-items:center;gap:3px;margin-top:2px;margin-left:12px;display:flex;position:relative;bottom:-3px}.bubble-time{font-size:var(--font-size-xs);color:var(--wa-text-time);white-space:nowrap}.bubble-edited{color:var(--wa-text-time);font-size:.625rem;font-style:italic}.bubble.deleted{opacity:.7}.bubble.deleted .bubble-text{color:var(--wa-deleted-text);font-style:italic}.bubble.deleted .bubble-text:before{content:"🚫 ";font-style:normal}.bubble.missed-call .bubble-text:before{content:"📞 "}.bubble.missed-call .bubble-text{color:var(--wa-danger);font-style:italic}.bubble.live-location .bubble-text:before{content:"📍 "}.bubble.live-location .bubble-text{color:var(--wa-green-light);font-style:italic}.bubble.media-omitted .bubble-text{color:var(--wa-text-muted);font-style:italic}.bubble.media-omitted .bubble-text:before{content:"📎 "}.media-container{cursor:pointer;border-radius:6px;margin:-2px -2px 4px;position:relative;overflow:hidden}.media-container img{object-fit:cover;width:100%;max-width:330px;max-height:400px;transition:filter var(--transition-fast);border-radius:6px;display:block}.media-container:hover img{filter:brightness(.9)}.media-container video{background:#000;border-radius:6px;outline:none;width:100%;max-width:330px;max-height:400px;display:block}.video-overlay{background:var(--wa-media-overlay);opacity:1;transition:var(--transition-fast);pointer-events:none;border-radius:6px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-overlay.hidden{opacity:0}.play-btn{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;display:flex}.play-btn:after{content:"";border:12px solid #0000;border-left:22px solid #fff;border-right-width:0;width:0;height:0;margin-left:4px}.audio-player{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xs);min-width:240px;display:flex}.audio-player audio{flex:1;max-width:220px;height:36px}.audio-player audio::-webkit-media-controls-panel{background:0 0}.audio-icon{background:var(--wa-green);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.sticker-container{margin:-2px -2px 4px}.sticker-container img{max-width:180px;max-height:180px;display:block}.bubble.sticker-bubble{box-shadow:none;padding:4px;background:0 0!important}.bubble.sticker-bubble:before{display:none}.media-caption{font-size:var(--font-size-base);padding-top:4px;line-height:1.35}.lightbox{z-index:9999;cursor:zoom-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000eb;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.lightbox img{object-fit:contain;border-radius:var(--radius-md);max-width:92vw;max-height:92vh;box-shadow:var(--shadow-lg);animation:.25s zoomIn}@keyframes zoomIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.lightbox-close{top:var(--space-lg);right:var(--space-lg);color:#fff;cursor:pointer;width:44px;height:44px;transition:var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:24px;display:flex;position:absolute}.lightbox-close:hover{background:#fff3}.scroll-bottom-btn{background:var(--wa-header);cursor:pointer;width:42px;height:42px;color:var(--wa-text-secondary);box-shadow:var(--shadow-md);transition:var(--transition-base);z-index:50;opacity:0;pointer-events:none;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute;bottom:20px;right:20px;transform:scale(.8)}.scroll-bottom-btn.visible{opacity:1;pointer-events:all;transform:scale(1)}.scroll-bottom-btn:hover{background:var(--wa-bg-input);color:var(--wa-text-primary)}.jump-to-date-panel{z-index:60;background:var(--wa-header);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-lg);animation:.2s slideDown;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translate(-50%)translateY(-10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.jump-to-date-panel input[type=date]{background:var(--wa-bg-input);border:1px solid var(--wa-border);color:var(--wa-text-primary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-family:var(--font-family);font-size:var(--font-size-sm);outline:none}.jump-to-date-panel input[type=date]:focus{border-color:var(--wa-green)}.jump-to-date-panel button{background:var(--wa-green);color:#fff;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:var(--transition-fast);border:none;font-weight:500}.jump-to-date-panel button:hover{background:var(--wa-green-light)}.stats-overlay{z-index:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.stats-panel{background:var(--wa-panel-bg,var(--wa-bg-panel));border-radius:var(--radius-xl);padding:var(--space-2xl);width:90%;max-width:480px;max-height:80vh;box-shadow:var(--shadow-lg);animation:.25s zoomIn;overflow-y:auto}.stats-panel h2{font-size:var(--font-size-xl);margin-bottom:var(--space-xl);background:linear-gradient(135deg, var(--wa-text-primary), var(--wa-green-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700}.stat-row{padding:var(--space-md) 0;border-bottom:1px solid var(--wa-border);justify-content:space-between;align-items:center;display:flex}.stat-row:last-child{border-bottom:none}.stat-label{font-size:var(--font-size-sm);color:var(--wa-text-secondary)}.stat-value{font-size:var(--font-size-md);color:var(--wa-green-light);font-weight:600}.stat-bar{background:var(--wa-border);border-radius:var(--radius-full);height:6px;margin-top:var(--space-sm);overflow:hidden}.stat-bar-fill{background:linear-gradient(90deg, var(--wa-green), var(--wa-green-light));border-radius:var(--radius-full);height:100%;transition:width .6s}.stats-close-btn{width:100%;margin-top:var(--space-xl);padding:var(--space-md);background:var(--wa-bg-input);border:1px solid var(--wa-border);color:var(--wa-text-primary);border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:var(--transition-fast);font-weight:500}.stats-close-btn:hover{background:var(--wa-border)}mark.search-highlight{color:inherit;background:#ffc10759;border-radius:2px;padding:0 1px}mark.search-highlight.active{background:#ffc107b3}@media (width<=768px){:root{--max-bubble-width:85%}.messages-container{padding:var(--space-sm) var(--space-md)}.chat-header{padding:0 var(--space-md)}.media-container img,.media-container video{max-width:260px}.search-container{max-width:250px}}@media (width<=480px){:root{--max-bubble-width:90%;--font-size-base:.875rem}.landing-content{padding:var(--space-lg)}.landing-icon{width:72px;height:72px;font-size:36px}.landing h1{font-size:var(--font-size-lg)}}