:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#f8fafc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: #25d366;--primary-dark: #128c7e;--secondary-color: #f0f2f5;--text-primary: #1f2937;--text-secondary: #6b7280;--border-color: #e5e7eb;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b}html,body{height:100%;width:100%;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden;overflow-y:auto}#root{height:100%;width:100%;margin:0;padding:0;text-align:left;max-width:none}a{font-weight:500;color:var(--primary-color);text-decoration:inherit}a:hover{color:var(--primary-dark)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--secondary-color);cursor:pointer;transition:all .25s ease}button:hover{border-color:var(--primary-color)}button:focus,button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}html{scrollbar-width:auto;scrollbar-color:var(--primary-color) #f1f5f9}body{overflow-y:scroll}::-webkit-scrollbar{width:14px;height:14px}::-webkit-scrollbar-track{background:#f1f5f9;border-radius:8px;border:1px solid #e2e8f0}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-color) 0%,var(--primary-dark) 100%);border-radius:8px;border:2px solid #f1f5f9;box-shadow:inset 0 1px 3px #0000001a}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-dark) 0%,#0d7377 100%);box-shadow:inset 0 1px 5px #0003}::-webkit-scrollbar-corner{background:#f1f5f9}@media (prefers-color-scheme: light){:root{color:var(--text-primary);background-color:#fff}a:hover{color:var(--primary-dark)}button{background-color:var(--secondary-color);color:var(--text-primary)}}@media (prefers-color-scheme: dark){:root{--primary-color: #25d366;--primary-dark: #128c7e;--secondary-color: #2a3942;--text-primary: #e9edef;--text-secondary: #8696a0;--border-color: #2a3942;background-color:#0b1426}}.form-select{cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none}html,body,#root{margin:0;padding:0;height:100%;width:100%;overflow:hidden}.whatsapp-dashboard{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#4a4a4a;margin:0;padding:0;background-color:#f8f9fa;height:100vh;width:100vw;display:flex;flex-direction:column;max-width:100%;overflow:hidden;position:absolute;top:0;left:0}.dashboard-loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#f8f9fa,#e9ecef);display:flex;align-items:center;justify-content:center;z-index:9999;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.dashboard-loading-content{display:flex;flex-direction:column;align-items:center;gap:24px;padding:48px 40px;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000001a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);max-width:450px;width:90%;text-align:center}.dashboard-loading-spinner{width:64px;height:64px;border:6px solid #f0f2f5;border-top:6px solid #4CAF50;border-radius:50%;animation:dashboardSpin 1.2s linear infinite}@keyframes dashboardSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dashboard-loading-text{color:#333;font-size:22px;font-weight:700;margin:0;background:linear-gradient(135deg,#4caf50,#45a049);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dashboard-loading-subtext{color:#666;font-size:16px;margin:0;font-weight:500;line-height:1.5}.simple-spinner{width:32px;height:32px;border:3px solid #f0f0f0;border-top:3px solid #4CAF50;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.simple-loading-text{color:#666;font-size:14px;font-weight:500}.notification-container{position:fixed;top:80px;right:20px;z-index:9997;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 100px);overflow-y:auto}.notification-bubble{background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;padding:16px;cursor:pointer;min-width:320px;animation:slideIn .3s ease-out;border:1px solid rgba(76,175,80,.1);transition:all .2s}.notification-bubble:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0003}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.notification-content{display:flex;align-items:center;gap:14px}.notification-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 2px 8px #4caf504d}.notification-info{flex:1}.notification-name{font-weight:700;color:#333;font-size:15px;margin-bottom:4px}.notification-message{color:#666;font-size:13px;line-height:1.4}.notification-badge{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border-radius:50%;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 2px 8px #4caf504d}.whatsapp-interface{display:flex;flex:1;width:100%;height:100vh;background-color:#fff;overflow:hidden;box-shadow:none;border-radius:0}.sidebar{width:30%!important;min-width:300px!important;max-width:420px!important;background-color:#fff!important;border:none!important;border-right:none!important;border-left:none!important;border-top:none!important;border-bottom:none!important;box-shadow:none!important;outline:none!important;display:flex!important;flex-direction:column!important;height:100%!important}.whatsapp-interface .sidebar{border:none!important;border-right:1px solid #e0e0e0!important;border-left:none!important;outline:none!important;box-shadow:none!important}.sidebar-header{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;background-color:#f0f2f5;height:60px;border-bottom:1px solid #e0e0e0}.icon-button{background:none;border:none;color:#54656f;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .2s;display:flex;align-items:center;justify-content:center;font-size:18px}.icon-button:hover{background-color:#4caf501a}.search-container{flex:1;padding:8px 16px;background-color:#f0f2f5}.search-input{width:100%;padding:10px 16px;border-radius:20px;border:none;background-color:#fff;font-size:14px;color:#4a4a4a;box-shadow:0 1px 3px #0000001a;box-sizing:border-box}.search-input:focus{outline:none;border:2px solid #4CAF50}.contacts-list{flex:1;overflow-y:auto;height:calc(100% - 60px)}.contacts-list::-webkit-scrollbar{width:4px}.contacts-list::-webkit-scrollbar-track{background:transparent}.contacts-list::-webkit-scrollbar-thumb{background:#0000001a;border-radius:2px}.contacts-list::-webkit-scrollbar-thumb:hover{background:#0003}.contacts-list{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}.contact-item{display:flex;align-items:center;padding:12px 16px;gap:12px;cursor:pointer;border-bottom:1px solid #f0f2f5;transition:background-color .2s}.contact-item:hover,.contact-item.selected{background-color:#f0f2f5}.contact-avatar{width:50px;height:50px;border-radius:50%;background-color:#4caf50;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0;border:2px solid #ffffff;box-shadow:0 2px 4px #0000001a}.contact-info{flex:1;display:flex;flex-direction:column;overflow:hidden}.contact-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.contact-name{font-size:16px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}.contact-time{font-size:12px;color:#8e8e93;flex-shrink:0}.contact-subheader{display:flex;justify-content:space-between;align-items:center}.contact-last-message{font-size:14px;color:#788166;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.unread-badge{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background-color:#4caf50;color:#fff;font-size:12px;font-weight:600;padding:0 6px;flex-shrink:0}.chat-area{flex:1;display:flex;flex-direction:column;background-color:#efeae2;position:relative;height:100%}.chat-header{padding:10px 16px;background-color:#4caf50;display:flex;align-items:center;justify-content:space-between;z-index:10;height:60px;color:#fff}.chat-contact-info{display:flex;align-items:center;gap:16px}.chat-contact-info h3{margin:0;font-size:16px;color:#fff;font-weight:600}.phone-number{font-size:12px;color:#fff;font-weight:600}.status-text{font-size:12px;color:#fffc;font-weight:400}.chat-header-actions{display:flex;align-items:center;gap:8px}.messages-container{flex:1;padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;justify-content:flex-start;height:calc(100vh - 180px);background-color:#efeae2;position:relative;min-height:0;scroll-behavior:smooth}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:#80808026;border-radius:4px;margin:4px 0}.messages-container::-webkit-scrollbar-thumb{background:#80808099;border-radius:4px;border:1px solid rgba(255,255,255,.2)}.messages-container::-webkit-scrollbar-thumb:hover{background:#808080cc}.messages-container::-webkit-scrollbar-thumb:active{background:#808080e6}.messages-container{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.6) rgba(128,128,128,.15)}.messages-wrapper{display:flex;flex-direction:column;gap:8px;min-height:100%;padding-bottom:16px}.scroll-to-bottom-button{position:absolute;bottom:24px;right:24px;width:56px;height:56px;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 6px 20px #4caf5066;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:100;transition:all .3s cubic-bezier(.175,.885,.32,1.275);opacity:0;transform:scale(.8) translateY(10px);pointer-events:none}.scroll-to-bottom-button.visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.scroll-to-bottom-button:hover{background:linear-gradient(135deg,#45a049,#388e3c);transform:scale(1.1) translateY(-2px);box-shadow:0 8px 25px #4caf5080}.scroll-to-bottom-button .unread-count{position:absolute;top:-6px;right:-6px;background:#f44336;color:#fff;border-radius:50%;min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 2px 8px #f4433666;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.day-separator{display:flex;justify-content:center;align-items:center;margin:20px 0;position:relative;text-align:center;flex-shrink:0;position:sticky;top:0;z-index:10}.day-separator:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(128,128,128,.3),transparent)}.day-separator span{background-color:#d1d7db;color:#667781;font-size:12px;font-weight:600;padding:6px 16px;border-radius:16px;text-transform:uppercase;line-height:1;position:relative;z-index:1;box-shadow:0 2px 8px #0000001a}.message-scroll-indicator{position:absolute;top:16px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;z-index:10;opacity:0;transition:opacity .3s ease;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.messages-container:hover .message-scroll-indicator{opacity:1}.chat-message{margin-bottom:12px;display:flex;width:100%;flex-shrink:0}.chat-message.outgoing{justify-content:flex-end}.chat-message.incoming{justify-content:flex-start}.message-content{max-width:65%;padding:6px 7px 8px 9px;border-radius:7.5px;position:relative;word-wrap:break-word;box-shadow:0 1px 2px #0000001a;display:flex;flex-direction:column}.outgoing .message-content{background:#d9fdd3;margin-left:auto;border-bottom-right-radius:2px}.incoming .message-content{background:#fff;margin-right:auto;border-bottom-left-radius:2px}.message-status-container{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px;align-self:flex-end;flex-shrink:0}.message-time{font-size:11px;color:#667781;font-weight:400;line-height:1}.message-status-ticks{display:flex;align-items:center;justify-content:center;margin-left:4px;flex-shrink:0}.status-pending{color:#8696a0;font-size:12px}.status-failed{color:#f44336;font-size:12px}.status-single-tick,.status-double-tick,.status-double-tick-read{display:flex;align-items:center;justify-content:center;line-height:1}.status-single-tick svg{width:16px;height:12px}.status-double-tick svg,.status-double-tick-read svg{width:20px;height:12px}.text-message-container{display:flex;flex-direction:column;width:100%}.text-message-content{margin-bottom:4px;word-wrap:break-word;line-height:1.4}.text-status-wrapper{align-self:flex-end;margin-top:2px}.image-message,.video-message,.document-message,.audio-message{display:flex;flex-direction:column;max-width:300px;position:relative}.message-footer{display:flex;justify-content:flex-end;margin-top:4px;align-self:flex-end}.audio-message{display:flex;flex-direction:column;max-width:300px}.voice-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#0000000d;border-radius:20px;min-width:220px;position:relative}.audio-status-wrapper{position:absolute;bottom:8px;right:12px;background:#fffc;border-radius:12px;padding:2px 6px;display:flex;align-items:center;gap:4px}.audio-status-wrapper .message-time{color:#333;font-size:10px}.document-message{display:flex;flex-direction:column;min-width:250px;max-width:350px}.document-content{display:flex;align-items:center;gap:12px;padding:12px 16px 24px;background:#0000000d;border-radius:8px;border:1px solid rgba(0,0,0,.1);position:relative}.document-status-wrapper{position:absolute;bottom:4px;right:12px;display:flex;align-items:center;gap:4px}.media-caption-status-container{position:relative;margin-top:4px}.media-status-wrapper{position:absolute;bottom:4px;right:8px;background:#0009;border-radius:12px;padding:2px 6px;display:flex;align-items:center;gap:4px}.media-status-wrapper .message-time{color:#fff;font-size:11px}.media-status-wrapper .status-single-tick svg path,.media-status-wrapper .status-double-tick svg path{fill:#fff}.media-status-wrapper .status-double-tick-read svg path{fill:#34b7f1}.media-overlay-buttons{position:absolute;top:8px;right:8px;display:flex;gap:8px}.media-overlay-btn{background:#000000b3;color:#fff;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;text-decoration:none}.media-overlay-btn:hover{background:#000000e6;transform:scale(1.1)}.outgoing .message-status-container{justify-content:flex-end}.outgoing .message-time{color:#667781}.outgoing .audio-status-wrapper{background:#d9fdd3e6}.outgoing .audio-status-wrapper .message-time{color:#333}.outgoing .document-content,.outgoing .voice-message{background:#dcf8c6}@media (max-width: 768px){.message-status-container{gap:2px}.media-status-wrapper{bottom:2px;right:4px;padding:1px 4px}.audio-status-wrapper{bottom:4px;right:8px;padding:1px 4px}.document-status-wrapper{bottom:2px;right:8px}}.message-content p{margin:0;font-size:14px;line-height:1.5;word-break:break-word;color:#333}.unified-message-card{background:linear-gradient(135deg,#fff,#f8f9fa);border:2px solid #e0e0e0;border-left:4px solid #4CAF50;border-radius:12px;padding:16px;margin:8px 0;max-width:400px;box-shadow:0 2px 8px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.unified-message-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e0e0e0}.unified-message-icon{width:32px;height:32px;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:0 2px 6px #4caf504d;flex-shrink:0}.unified-message-title{font-weight:700;color:#2e7d32;font-size:16px;flex:1}.automation-badge{background:#4caf50;color:#fff;border-radius:12px;padding:4px 8px;font-size:10px;font-weight:600;margin-left:auto;display:flex;align-items:center;gap:4px}.unified-message-content{display:flex;flex-direction:column;gap:12px}.unified-message-text{font-size:14px;color:#333;line-height:1.5;background:#f8f9fa;padding:8px 12px;border-radius:8px;border-left:3px solid #4CAF50}.unified-message-details{display:flex;flex-direction:column;gap:8px}.unified-detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#fff;border-radius:6px;border-left:3px solid #4CAF50;box-shadow:0 1px 3px #0000001a}.unified-detail-row.unified-highlight-row{background:#e8f5e8;border-left:3px solid #2e7d32}.unified-label{font-size:11px;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.unified-value{font-size:13px;color:#2e7d32;font-weight:700}.unified-value.unified-highlight,.unified-value.unified-amount{color:#1976d2;font-size:14px}.unified-value.unified-type{background:#e3f2fd;color:#1976d2;padding:2px 6px;border-radius:10px;font-size:10px;text-align:center}.unified-value.unified-payment{background:#e8f5e8;color:#388e3c;padding:2px 6px;border-radius:10px;font-size:10px;text-align:center}.unified-value.unified-payment.cod{background:#fff3e0;color:#f57c00}.unified-value.unified-payment.online{background:#e8f5e8;color:#388e3c}.unified-value.unified-pending{background:#fff3e0;color:#f57c00;padding:2px 6px;border-radius:10px;font-size:10px;text-align:center}.unified-items-section{background:#fff;border-radius:8px;padding:12px;border-left:3px solid #4CAF50;box-shadow:0 1px 3px #0000001a}.unified-section-title{margin:0 0 8px;color:#2e7d32;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.unified-items-list{display:flex;flex-direction:column;gap:4px}.unified-item-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#444;padding:4px 0;border-bottom:1px solid #f0f0f0}.unified-item-row:last-child{border-bottom:none}.unified-item-name{font-weight:600;color:#333}.unified-item-details{color:#666;font-size:11px}.unified-more-items{font-style:italic;color:#666;text-align:center;font-size:11px;margin-top:4px;padding:4px;background:#f8f9fa;border-radius:4px}.unified-action-section{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.unified-action-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 2px 6px #4caf504d;cursor:pointer;transition:all .2s;border:none}.unified-action-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #4caf5066}.unified-action-icon{font-size:14px}.unified-address-box{background:#f8f9fa;padding:8px 12px;border-radius:6px;border-left:3px solid #4CAF50}.unified-address-line{font-size:12px;color:#444;line-height:1.4;margin-bottom:2px}.unified-message-footer{display:flex;justify-content:center;padding-top:8px;border-top:1px solid #e0e0e0;margin-top:8px}.unified-status{font-size:11px;color:#666;font-weight:500;font-style:italic;text-align:center}.message-status-enhanced{font-size:12px;color:#8e8e93;margin-left:4px}.status-icon{vertical-align:middle}.status-read{color:#4caf50}.status-failed{color:#f44336}.voice-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:20px;box-shadow:0 2px 8px #0000001a;min-width:220px;max-width:300px;transition:all .2s ease}.voice-message:hover{box-shadow:0 4px 16px #00000026;transform:translateY(-1px)}.voice-message-content{display:flex;align-items:center;gap:8px;flex:1}.voice-play-button{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;box-shadow:0 2px 8px #4caf504d}.voice-play-button:hover{background:linear-gradient(135deg,#45a049,#388e3c);transform:scale(1.1);box-shadow:0 4px 12px #4caf5066}.voice-play-button.playing{background:linear-gradient(135deg,#ff5722,#e64a19)}.voice-play-button i{font-size:14px;margin-left:2px}.voice-waveform{flex:1;display:flex;flex-direction:column;gap:6px}.voice-bars{display:flex;align-items:center;gap:2px;height:28px}.voice-bar{width:3px;background:#e0e0e0;border-radius:2px;transition:all .1s ease}.voice-bar.active{background:linear-gradient(135deg,#4caf50,#45a049);animation:waveAnimation .6s ease-in-out infinite alternate}@keyframes waveAnimation{0%{transform:scaleY(1);opacity:.7}to{transform:scaleY(1.4);opacity:1}}.voice-duration{font-size:11px;color:#666;font-weight:600;font-family:Courier New,monospace;display:flex;align-items:center;gap:4px}.outgoing .voice-message{background:#dcf8c6}.outgoing .voice-play-button{background:linear-gradient(135deg,#128c7e,#075e54)}.outgoing .voice-play-button:hover{background:linear-gradient(135deg,#075e54,#004d40)}.outgoing .voice-play-button.playing{background:linear-gradient(135deg,#ff5722,#e64a19)}.media-message{display:flex;flex-direction:column;gap:6px}.message-image{max-width:300px;height:auto;border-radius:8px;display:block;object-fit:cover}.message-video{max-width:300px;height:auto;border-radius:8px;display:block}.media-placeholder{padding:12px;background:#f0f2f5;border-radius:8px;text-align:center;color:#666;font-size:14px}.media-caption{font-size:13px;color:#333;margin-top:4px}.message-metadata{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px}.message-time{font-size:11px;color:#667781}.message-status{font-size:12px;color:#8e8e93}.message-status.read .read-status{color:#4caf50}.message-composer{display:flex;flex-direction:column;gap:8px;padding:12px 16px;background:#f0f2f5;border-top:1px solid #e9edef;position:relative;min-height:66px}.composer-main-row{display:flex;align-items:center;gap:8px;width:100%}.composer-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.composer-action-button{width:40px;height:40px;background:none;border:none;color:#54656f;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.composer-action-button:hover{background-color:#4caf501a;transform:scale(1.05)}.composer-action-button:disabled{opacity:.5;cursor:not-allowed}.composer-input-container{flex:1;position:relative;display:flex;align-items:center}.composer-input{width:100%;min-height:40px;max-height:100px;padding:10px 15px;border:none;border-radius:20px;background:#fff;font-size:15px;line-height:20px;resize:none;outline:none;font-family:inherit;box-sizing:border-box;color:#333;display:block}.composer-input:focus{box-shadow:0 0 0 2px #4caf50}.composer-input.disconnected{background:#f5f5f5;color:#999}.send-button{width:40px;height:40px;background:#4caf50;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;font-size:16px}.send-button:hover:not(:disabled){background:#45a049;transform:scale(1.05)}.send-button:disabled{background:#ccc;opacity:.6;cursor:not-allowed}.composer-connection-warning{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:1px solid #ffc107;border-radius:12px;font-size:14px;color:#856404;box-shadow:0 2px 8px #ffc10733}.retry-composer-btn{background:#ffc107;color:#212529;border:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s}.retry-composer-btn:hover{background:#ffb300;transform:translateY(-1px)}.chat-window-expired-container{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #ffc107;border-radius:16px;padding:20px;margin:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #ffc10733}.chat-window-expired-content{display:flex;align-items:center;gap:16px;text-align:center}.expired-icon{color:#f57c00;font-size:28px;animation:pulse 2s infinite}.expired-message{color:#856404;font-size:15px;font-weight:600;margin-right:16px}.send-template-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:12px 20px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px #4caf504d}.no-chat-selected{flex:1;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa;height:100%}.empty-state{text-align:center;padding:40px;color:#8e8e93}.empty-icon{font-size:60px;color:#4caf50;margin-bottom:20px}.empty-state h2{font-size:24px;font-weight:600;margin-bottom:10px;color:#4a4a4a}.empty-state p{font-size:16px}.empty-contacts-state,.empty-messages-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#8e8e93;height:100%;min-height:300px}.empty-contacts-icon,.empty-messages-icon{font-size:48px;margin-bottom:16px;opacity:.6}.empty-contacts-text,.empty-messages-text{font-size:18px;font-weight:600;color:#333;margin-bottom:8px}.empty-contacts-subtext,.empty-messages-subtext{font-size:14px;color:#666}.connection-warning{margin-top:20px;padding:12px;background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px}.retry-connection-btn,.add-contact-btn{background:#4caf50;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;margin-top:8px}.retry-connection-btn:hover,.add-contact-btn:hover{background:#45a049}.no-contacts-state{margin-top:20px;padding:16px;background:#f8f9fa;border-radius:8px}.new-chat-popup{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.new-chat-content{background:#fff;border-radius:12px;padding:24px;width:400px;max-width:90vw;box-shadow:0 10px 30px #0000004d}.new-chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.new-chat-content h3{margin:0;color:#333;font-size:18px;font-weight:600}.new-chat-form{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.new-chat-input{width:100%;padding:12px 16px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s;box-sizing:border-box}.new-chat-input:focus{border-color:#4caf50}.new-chat-input:disabled{background:#f5f5f5;color:#999}.new-chat-actions{display:flex;gap:12px;justify-content:flex-end}.new-chat-button{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.new-chat-button.cancel{background:#f5f5f5;color:#666}.new-chat-button.cancel:hover{background:#e0e0e0}.new-chat-button.save{background:#4caf50;color:#fff}.new-chat-button.save:hover{background:#45a049}.new-chat-button:disabled{opacity:.6;cursor:not-allowed}.simple-success-message{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#4caf50;color:#fff;border-radius:12px;box-shadow:0 4px 16px #4caf504d;margin-bottom:20px;font-weight:500;animation:slideIn .3s ease-out}.error-message{position:fixed;top:20px;right:20px;background:#f44336;color:#fff;padding:16px 20px;border-radius:12px;box-shadow:0 8px 32px #f443364d;display:flex;align-items:center;gap:12px;z-index:9999;max-width:400px;animation:slideIn .3s ease-out;font-weight:500}.error-message button{background:none;border:none;color:#fff;cursor:pointer;margin-left:12px;padding:8px;border-radius:50%;transition:background .2s;display:flex;align-items:center;justify-content:center}.error-message button:hover{background:#fff3}.notification-toast{position:fixed;top:20px;right:20px;z-index:10000;display:flex;align-items:center;gap:10px;font-weight:500;animation:slideInRight .3s ease-out;max-width:350px}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.messages-container.contact-selected{scroll-behavior:auto!important}.messages-container.smooth-scroll{scroll-behavior:smooth}.auth-loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;z-index:9999;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.auth-loading-content{display:flex;flex-direction:column;align-items:center;gap:24px;padding:48px 40px;background:#fffffff2;border-radius:20px;box-shadow:0 20px 60px #0000004d;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);max-width:450px;width:90%;text-align:center}.auth-loading-spinner-container{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.auth-loading-spinner{width:64px;height:64px;border:6px solid #f0f2f5;border-top:6px solid #4CAF50;border-radius:50%;animation:authSpin 1.2s linear infinite;box-shadow:0 0 20px #4caf504d}@keyframes authSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-loading-title{color:#333;font-size:24px;font-weight:700;margin:0;background:linear-gradient(135deg,#4caf50,#45a049);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-loading-message{color:#666;font-size:16px;margin:0;font-weight:500;line-height:1.5}.auth-loading-progress{width:100%;height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden;margin-top:16px}.auth-loading-progress-bar{height:100%;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:2px;animation:authProgress 2s ease-in-out infinite;box-shadow:0 0 10px #4caf5066}@keyframes authProgress{0%{width:0%}50%{width:70%}to{width:100%}}.professional-media-preview{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.preview-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.preview-container{position:relative;background:#fff;border-radius:16px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0006;overflow:hidden;animation:slideUp .4s ease-out}@keyframes slideUp{0%{transform:translateY(50px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.preview-title{display:flex;align-items:center;gap:12px;font-weight:600;color:#333;font-size:16px}.preview-title i{color:#4caf50;font-size:18px}.preview-close-professional{background:#f44336;color:#fff;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.preview-close-professional:hover{background:#d32f2f;transform:scale(1.1)}.preview-content-area{flex:1;padding:20px;display:flex;align-items:center;justify-content:center;min-height:300px;max-height:500px;overflow:hidden}.professional-image-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-preview-container{position:relative;max-width:100%;max-height:100%}.professional-preview-image{max-width:500px;max-height:400px;width:auto;height:auto;border-radius:8px;box-shadow:0 8px 32px #0003;object-fit:contain}.image-info-overlay{position:absolute;bottom:-40px;left:0;right:0;text-align:center;padding:8px;background:#000000b3;border-radius:8px;margin-top:12px}.file-details{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:12px}.file-name{font-weight:600;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:#fffc}.professional-video-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.video-preview-container{position:relative;max-width:100%;max-height:100%}.professional-preview-video{max-width:500px;max-height:400px;width:auto;height:auto;border-radius:8px;box-shadow:0 8px 32px #0003}.video-overlay-professional{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;border-radius:50%;width:64px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.video-overlay-professional:hover{background:#000000e6;transform:translate(-50%,-50%) scale(1.1)}.video-play-professional{color:#fff;font-size:24px}.video-info-overlay{position:absolute;bottom:-40px;left:0;right:0;text-align:center;padding:8px;background:#000000b3;border-radius:8px;margin-top:12px}.professional-audio-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.audio-preview-container{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px;text-align:center}.audio-visual-container{display:flex;flex-direction:column;align-items:center;gap:20px}.audio-icon-large{width:80px;height:80px;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;box-shadow:0 8px 32px #4caf504d}.audio-waveform-professional{display:flex;align-items:center;gap:3px;height:60px}.waveform-bar-professional{width:4px;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:2px;animation:audioWave 1.5s ease-in-out infinite;opacity:.7}@keyframes audioWave{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.5)}}.audio-info-professional{display:flex;flex-direction:column;gap:8px}.recording-label{font-size:18px;font-weight:600;color:#333}.recording-duration{font-size:14px;color:#666;font-family:Courier New,monospace}.audio-controls-professional{width:100%;max-width:300px}.professional-audio-player{width:100%;height:40px}.professional-document-preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.document-preview-container{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px;text-align:center}.document-icon-large{width:80px;height:80px;background:linear-gradient(135deg,#2196f3,#1976d2);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;box-shadow:0 8px 32px #2196f34d}.document-info-professional{display:flex;flex-direction:column;gap:12px}.document-name-professional{font-size:20px;font-weight:600;color:#333;word-break:break-word;max-width:400px}.document-meta{display:flex;justify-content:center;gap:16px;font-size:14px;color:#666}.document-size{font-weight:500}.document-type{background:#e3f2fd;color:#1976d2;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600}.preview-caption-professional{border-top:1px solid #e0e0e0;background:#f8f9fa;padding:16px 20px}.caption-input-container{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:4px 4px 4px 16px;border:1px solid #e0e0e0;transition:border-color .2s}.caption-input-container:focus-within{border-color:#4caf50}.professional-caption-input{flex:1;border:none;outline:none;padding:12px 0;font-size:14px;color:#333;background:transparent}.caption-actions{display:flex;align-items:center}.caption-clear-btn{background:#f5f5f5;border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s}.caption-clear-btn:hover{background:#e0e0e0;color:#333}.caption-footer{margin-top:8px;text-align:center}.caption-hint{font-size:12px;color:#666;font-style:italic}.preview-actions-professional{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid #e0e0e0;background:#f8f9fa;gap:12px}.preview-action-btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;min-width:120px;justify-content:center}.cancel-btn{background:#f5f5f5;color:#666;border:1px solid #e0e0e0}.cancel-btn:hover{background:#e0e0e0;color:#333}.send-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;box-shadow:0 2px 8px #4caf504d}.send-btn:hover:not(:disabled){background:linear-gradient(135deg,#45a049,#388e3c);transform:translateY(-1px);box-shadow:0 4px 12px #4caf5066}.send-btn:disabled{background:#ccc;color:#666;cursor:not-allowed;transform:none;box-shadow:none}.btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.messages-end-anchor{height:1px;width:1px}.emoji-picker-wrapper{position:absolute;bottom:50px;left:0;z-index:1000;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #00000026;background:#fff;border:1px solid #e0e0e0;animation:emojiPickerFadeIn .2s ease-out}@keyframes emojiPickerFadeIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.emoji-picker-container{position:relative}.custom-emoji-picker{width:320px;max-height:200px;overflow-y:auto;padding:8px}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoji-button-grid{background:none;border:none;font-size:20px;padding:8px;cursor:pointer;border-radius:6px;transition:background .2s}.emoji-button-grid:hover{background:#f0f0f0}.attachment-menu-container{position:relative}.attachment-menu{position:absolute;bottom:50px;left:0;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid #e0e0e0;padding:8px 0;z-index:1000;min-width:200px;animation:attachmentMenuFadeIn .2s ease-out}@keyframes attachmentMenuFadeIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.attachment-option{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background-color .2s;font-size:14px;color:#333;text-decoration:none}.attachment-option:hover{background-color:#f5f5f5}.attachment-icon{width:20px;text-align:center;font-size:16px}.photo-icon{color:#ff6b6b}.video-icon{color:#4ecdc4}.document-icon{color:#45b7d1}.audio-icon{color:#96ceb4}.template-icon{color:#feca57}.media-preview{background:#fff;border-radius:12px;padding:12px;margin-bottom:8px;border:1px solid #e0e0e0;box-shadow:0 2px 8px #0000001a}.preview-container{position:relative;display:flex;align-items:center;gap:12px}.preview-media{max-width:200px;max-height:150px;border-radius:8px;object-fit:cover}.preview-close{position:absolute;top:-8px;right:-8px;background:#f44;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}.preview-caption{margin-top:12px}.caption-input{width:100%;padding:8px 12px;border:1px solid #e0e0e0;border-radius:20px;font-size:14px;outline:none;resize:none}.caption-input:focus{border-color:#4caf50}.recording-indicator{background:linear-gradient(135deg,#f44,#c00);color:#fff;padding:12px 16px;border-radius:8px;margin-bottom:8px;box-shadow:0 2px 8px #ff44444d}.recording-controls{display:flex;align-items:center;justify-content:space-between}.recording-info{display:flex;align-items:center;gap:8px}.recording-icon{animation:pulse 1s infinite;font-size:16px}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.recording-time{font-weight:600;font-size:16px;font-family:Courier New,monospace}.recording-text{font-size:14px;font-weight:500}.recording-actions{display:flex;gap:8px}.cancel-recording,.stop-recording{background:#fff3;border:none;color:#fff;padding:8px;border-radius:50%;cursor:pointer;transition:all .2s;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.cancel-recording:hover,.stop-recording:hover{background:#ffffff4d;transform:scale(1.1)}.media-error-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;color:#6c757d;text-align:center;min-height:120px;max-width:300px}.media-error-placeholder i{margin-bottom:8px;opacity:.5}.message-image,.message-video{background:#f8f9fa;border-radius:8px;position:relative}.message-image:before,.message-video:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:loading-shimmer 1.5s infinite;border-radius:8px;z-index:1}.message-image[data-loaded=true]:before,.message-video[data-loaded=true]:before{display:none}@keyframes loading-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.media-debug-info{position:absolute;bottom:4px;left:4px;background:#000000b3;color:#fff;font-size:9px;padding:2px 4px;border-radius:2px;font-family:monospace;z-index:10}@media (max-width: 768px){.whatsapp-interface{flex-direction:column}.sidebar{width:100%!important;height:40%!important;border:none!important;border-right:none!important;border-bottom:1px solid #e0e0e0!important}.chat-area{height:60%}.messages-container{height:calc(100vh - 120px);padding:12px}.messages-container::-webkit-scrollbar{width:6px}.scroll-to-bottom-button{width:48px;height:48px;bottom:20px;right:20px;font-size:16px}.day-separator{margin:16px 0}.day-separator span{padding:4px 12px;font-size:11px}.message-content{max-width:85%}.unified-message-card{max-width:280px;padding:12px}.composer-main-row{gap:6px}.composer-action-button{width:36px;height:36px;font-size:16px}.send-button{width:36px;height:36px}.notification-bubble{min-width:280px;margin:0 16px}.voice-message{min-width:180px;max-width:250px}.chat-window-expired-container{margin:12px;padding:16px}.chat-window-expired-content{flex-direction:column;gap:12px}.expired-message{margin-right:0;margin-bottom:8px}.dashboard-loading-content{padding:32px 24px;margin:20px}.dashboard-loading-spinner{width:48px;height:48px;border-width:4px}.dashboard-loading-text{font-size:18px}.dashboard-loading-subtext{font-size:14px}.auth-loading-content{padding:32px 24px;margin:20px}.auth-loading-spinner{width:48px;height:48px;border-width:4px}.auth-loading-title{font-size:20px}.auth-loading-message{font-size:14px}.preview-container{max-width:95vw;max-height:95vh;margin:10px}.preview-content-area{padding:16px;min-height:200px;max-height:400px}.professional-preview-image,.professional-preview-video{max-width:300px;max-height:250px}.messages-container{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}}@media (max-width: 480px){.dashboard-loading-content{padding:24px 20px;margin:16px}.dashboard-loading-spinner{width:40px;height:40px;border-width:3px}.dashboard-loading-text{font-size:16px}.dashboard-loading-subtext{font-size:12px}.scroll-to-bottom-button{width:44px;height:44px;bottom:16px;right:16px}.notification-bubble{min-width:240px}.voice-message{min-width:160px;max-width:200px;padding:10px 12px}.voice-play-button{width:36px;height:36px}.auth-loading-content{padding:24px 20px;margin:16px}.auth-loading-spinner{width:40px;height:40px;border-width:3px}.auth-loading-title{font-size:18px}.auth-loading-message{font-size:12px}.preview-container{max-width:98vw;max-height:98vh;margin:5px}.preview-content-area{padding:12px;min-height:150px;max-height:300px}.professional-preview-image,.professional-preview-video{max-width:250px;max-height:200px}.preview-actions-professional{padding:12px 16px;gap:8px}.preview-action-btn{padding:10px 16px;font-size:13px;min-width:100px}}@media (prefers-contrast: high){.messages-container::-webkit-scrollbar-thumb{background:#000c}.messages-container::-webkit-scrollbar-track{background:#0003}.dashboard-loading-spinner{border-color:#000;border-top-color:#4caf50}.scroll-to-bottom-button{background:#000;border:2px solid #4CAF50}}@media (prefers-reduced-motion: reduce){.messages-container{scroll-behavior:auto}.scroll-to-bottom-button{transition:none}.dashboard-loading-spinner,.auth-loading-spinner,.scroll-to-bottom-button,.voice-bar.active,.notification-bubble,.voice-message,.waveform-bar-professional{animation:none;transition:none}.scroll-to-bottom-button.visible{opacity:1;transform:none}}.messages-container:focus-within{outline:2px solid #4CAF50;outline-offset:-2px}.scroll-to-bottom-button:focus,.send-template-button:focus,.retry-composer-btn:focus,.voice-play-button:focus{outline:2px solid #4CAF50;outline-offset:2px}:focus-visible{outline:2px solid #4CAF50;outline-offset:2px}*{transition-property:background-color,border-color,color,opacity,transform;transition-duration:.2s;transition-timing-function:ease}.messages-container *,.chat-message *,.message-content *{transition:none}@media print{.dashboard-loading-overlay,.auth-loading-overlay,.scroll-to-bottom-button,.notification-container,.error-message,.professional-media-preview{display:none!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.loading{pointer-events:none;opacity:.7}.loading *{cursor:wait!important}.fade-in{animation:fadeIn .3s ease-out}.cod-followup-actions{display:flex;gap:12px;margin:16px 0 8px}.cod-followup-actions .unified-action-button{flex:1;padding:12px 16px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;transition:all .2s ease;min-height:48px}.cod-followup-actions .keep-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;box-shadow:0 2px 8px #4caf504d}.cod-followup-actions .keep-button:hover{background:linear-gradient(135deg,#45a049,#3d8b40);transform:translateY(-1px);box-shadow:0 4px 12px #4caf5066}.cod-followup-actions .cancel-button{background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff;box-shadow:0 2px 8px #f443364d}.cod-followup-actions .cancel-button:hover{background:linear-gradient(135deg,#d32f2f,#b71c1c);transform:translateY(-1px);box-shadow:0 4px 12px #f4433666}.cod-followup-actions .unified-action-icon{font-size:16px}.unified-message-card.order-cancelled{border-left:4px solid #f44336;background:linear-gradient(135deg,#ffebee,#fce4ec)}.unified-message-card.order-kept{border-left:4px solid #4CAF50;background:linear-gradient(135deg,#e8f5e8,#f1f8e9)}.unified-success{color:#4caf50;font-weight:600}.unified-cancelled{color:#f44336;font-weight:600}@media (max-width: 768px){.cod-followup-actions{flex-direction:column;gap:8px}.cod-followup-actions .unified-action-button{min-height:44px;font-size:13px}}.message-status-container{display:flex;align-items:center;gap:4px;margin-top:2px;justify-content:flex-end;opacity:.8}.message-time{font-size:11px;color:#667781;font-weight:400;font-family:inherit}.message-status-ticks{display:flex;align-items:center;justify-content:center;margin-left:4px}.status-pending{width:12px;height:12px;border-radius:50%;background-color:#667781;opacity:.5;display:flex;align-items:center;justify-content:center}.status-single-tick,.status-double-tick,.status-double-tick-read{display:flex;align-items:center;justify-content:center;width:16px;height:12px}.status-failed{width:12px;height:12px;display:flex;align-items:center;justify-content:center}.message-status-container:hover{opacity:1}.chat-message.outgoing .message-status-container{margin-left:auto;margin-right:8px}.chat-window-expired-overlay{position:relative;z-index:10}.window-expired-banner{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:1px solid #ffc107;border-left:4px solid #f57c00;margin:0 16px 12px;border-radius:12px;box-shadow:0 4px 16px #ffc10733;animation:slideInFromTop .3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.window-expired-content{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px}.window-expired-icon{color:#f57c00;font-size:24px;animation:pulse 2s infinite;flex-shrink:0}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}.window-expired-text{flex:1;display:flex;flex-direction:column;gap:4px}.main-text{color:#856404;font-size:16px;font-weight:700;margin:0}.sub-text{color:#856404;font-size:13px;opacity:.9;margin:0;line-height:1.3}.send-template-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:12px 20px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 2px 8px #4caf504d;display:flex;align-items:center;gap:8px;flex-shrink:0}.send-template-button:hover{background:linear-gradient(135deg,#45a049,#388e3c);transform:translateY(-1px);box-shadow:0 4px 12px #4caf5066}.send-template-button:active{transform:translateY(0)}.contact-last-message.template-message{color:#4caf50!important;font-weight:600!important}.contact-item.template-contact{border-left:3px solid #4CAF50}.contact-last-message{font-size:14px;color:#788166;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%;line-height:1.3;word-break:keep-all;overflow-wrap:normal;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}.composer-input.disconnected{background:#f5f5f5!important;color:#999!important;cursor:not-allowed;border:1px solid #ddd}.composer-input:disabled{background:#f5f5f5;color:#999;cursor:not-allowed;border:1px solid #ddd}.send-button:disabled{background:#ccc!important;opacity:.6;cursor:not-allowed;transform:none!important}.send-button[title*=expired]{background:#ff9800!important;opacity:.7}@media (max-width: 768px){.window-expired-banner{margin:0 12px 8px}.window-expired-content{flex-direction:column;gap:12px;text-align:center;padding:12px}.main-text{font-size:15px}.sub-text{font-size:12px}.send-template-button{padding:10px 16px;font-size:13px;width:100%;justify-content:center}}.clean-window-expired-state{padding:0;margin:0;background:transparent}.expired-notification-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:1px solid #ff9800;border-radius:12px;margin:8px 0;box-shadow:0 2px 8px #ff980026;gap:16px}.expired-info{display:flex;align-items:center;gap:12px;flex:1}.expired-info-icon{color:#ff9800;font-size:18px;flex-shrink:0}.expired-text{color:#e65100;font-size:14px;font-weight:500;line-height:1.4;margin:0}.clean-send-template-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 8px #4caf5040;display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:140px;justify-content:center}.clean-send-template-button:hover:not(:disabled){background:linear-gradient(135deg,#45a049,#388e3c);transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d}.clean-send-template-button:disabled{background:#ccc;color:#666;cursor:not-allowed;transform:none;box-shadow:none}.clean-send-template-button i{font-size:14px}@media (max-width: 768px){.expired-notification-bar{flex-direction:column;gap:12px;padding:16px;text-align:center}.expired-info{justify-content:center;text-align:center}.expired-text{font-size:13px}.clean-send-template-button{width:100%;padding:12px 20px;min-width:auto}}@media (max-width: 480px){.expired-notification-bar{margin:4px 0;padding:12px}.expired-info-icon{font-size:16px}.expired-text{font-size:12px}.clean-send-template-button{padding:10px 16px;font-size:13px}}.unified-payment.cod,.unified-action-button.cod-payment{background-color:#dcfce7;color:#166534;border:1px solid #bbf7d0}.unified-action-button.cod-payment:hover{background-color:#bbf7d0}.unified-payment.online{background-color:#dbeafe;color:#1e40af;border:1px solid #93c5fd}.unified-action-button.review-pay.primary{background-color:#3b82f6;color:#fff;border:1px solid #2563eb}.unified-action-button.review-pay.primary:hover{background-color:#2563eb}.unified-action-button.pay-now{background-color:#059669;color:#fff;border:1px solid #047857}.unified-action-button.pay-now:hover{background-color:#047857}.unified-message-card.broadcast-template{border-left:4px solid #8b5cf6;background:linear-gradient(135deg,#faf5ff,#f3e8ff)}.broadcast-badge{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 4px #8b5cf64d}.unified-action-button.broadcast-status{background-color:#ede9fe;color:#6b21a8;border:1px solid #c4b5fd}.unified-action-button.broadcast-sent{background-color:#dcfce7;color:#166534;border:1px solid #bbf7d0}.unified-address-box{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;font-family:Courier New,monospace;font-size:13px;line-height:1.5}.unified-address-line{margin-bottom:4px;color:#475569}.unified-address-line:last-child{margin-bottom:0}.unified-action-button.delivery-tracking{background-color:#fff7ed;color:#ea580c;border:1px solid #fed7aa}.unified-action-button.delivery-tracking:hover{background-color:#fed7aa}.unified-status{font-weight:600;color:#059669;display:flex;align-items:center;gap:6px}@media (max-width: 768px){.unified-action-section{flex-direction:column;gap:8px}.unified-action-button{width:100%;justify-content:center}}.message-with-timestamp{position:relative;width:100%;display:flex;flex-direction:column}.message-timestamp{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;color:#667781;font-weight:400;opacity:.8}.incoming-timestamp{justify-content:flex-start;align-self:flex-start}.outgoing-timestamp{justify-content:flex-end;align-self:flex-end}.message-time{font-size:11px;color:#667781;font-weight:400;opacity:.8;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.incoming-timestamp .message-time{color:#54656f}.outgoing-timestamp .message-time{color:#667781}.chat-message.incoming .message-with-timestamp{align-items:flex-start}.chat-message.outgoing .message-with-timestamp{align-items:flex-end}.text-message-container{display:flex;flex-direction:column;gap:4px}.text-message-content{word-wrap:break-word;white-space:pre-wrap;line-height:1.4}.automation-badge{font-size:10px;background:#ff9800;color:#fff;padding:2px 6px;borderRadius:10px;alignSelf:flex-start;margin-bottom:4px}.message-status-container{display:flex;align-items:center;gap:4px;margin-top:2px;justify-content:flex-end}.message-status-ticks,.status-pending,.status-failed,.status-single-tick,.status-double-tick,.status-double-tick-read{display:flex;align-items:center;justify-content:center}.image-message .message-with-timestamp,.video-message .message-with-timestamp,.audio-message .message-with-timestamp,.document-message .message-with-timestamp{margin-top:0}.image-message .message-timestamp,.video-message .message-timestamp,.audio-message .message-timestamp,.document-message .message-timestamp{margin-top:8px;padding:4px 8px;background:#ffffffe6;border-radius:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.unified-message-card .message-timestamp{margin-top:8px;padding:4px 8px;background:#0000000d;border-radius:8px}.chat-message.incoming .message-content{background:#fff;border:1px solid #e0e0e0;border-radius:12px 12px 12px 4px;padding:8px 12px;max-width:80%;word-wrap:break-word;box-shadow:0 1px 2px #0000001a}.chat-message.outgoing .message-content{background:#dcf8c6;border-radius:12px 12px 4px;padding:8px 12px;max-width:80%;word-wrap:break-word;box-shadow:0 1px 2px #0000001a;align-self:flex-end}@media (max-width: 768px){.message-time{font-size:10px}.message-timestamp{margin-top:2px}.chat-message.incoming .message-content,.chat-message.outgoing .message-content{max-width:85%}}@media (prefers-color-scheme: dark){.message-time,.incoming-timestamp .message-time,.outgoing-timestamp .message-time{color:#8696a0}}.message-with-timestamp{animation:messageSlideIn .3s ease-out}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-with-timestamp:hover .message-time{opacity:1;transition:opacity .2s ease}.message-with-timestamp:focus-within .message-time{opacity:1;outline:2px solid #25D366;outline-offset:2px;border-radius:4px}:root{--primary-color: #25d366;--primary-dark: #128c7e;--secondary-color: #f0f2f5;--text-primary: #1f2937;--text-secondary: #6b7280;--border-color: #e5e7eb;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--info-color: #3b82f6}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden;overflow-y:auto}#root{height:100%;width:100%;margin:0;padding:0;text-align:left;max-width:none;min-height:100vh}html{scrollbar-width:none}body{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{width:6px;height:6px;background:transparent}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0000001a}::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#0d7377 0%,var(--primary-color) 100%)}.app-container{display:flex;width:100%;min-height:100vh;overflow-x:hidden;position:relative}.content-area{flex:1;width:calc(100% - 200px);margin-left:200px;min-height:100vh;overflow-x:hidden;overflow-y:auto;position:relative}.content-area.full-width{width:100%;margin-left:0}.content-wrapper{min-height:100vh;width:100%}.page-container{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-column{display:flex;flex-direction:column}.hidden{display:none}.scrollable{overflow-y:auto;scrollbar-width:auto;scrollbar-color:var(--primary-color) #f1f5f9}.btn{padding:12px 24px;border-radius:12px;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1;position:relative;overflow:hidden}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;box-shadow:0 4px 12px #25d3664d}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-dark),#0d7377);transform:translateY(-2px);box-shadow:0 6px 20px #25d36666}.btn-secondary{background:linear-gradient(135deg,var(--info-color),#2563eb);color:#fff;box-shadow:0 4px 12px #3b82f64d}.btn-secondary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.btn-danger{background:linear-gradient(135deg,var(--error-color),#dc2626);color:#fff;box-shadow:0 4px 12px #ef44444d}.btn-danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 6px 20px #ef444466}.btn-outline{background:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover:not(:disabled){background:var(--primary-color);color:#fff;transform:translateY(-2px)}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-primary);font-size:14px}.form-input{width:100%;padding:14px 16px;border:2px solid var(--border-color);border-radius:12px;font-size:14px;transition:all .3s ease;background-color:#fff;font-family:inherit}.form-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #25d3661a}.form-input:invalid{border-color:var(--error-color)}.form-textarea{min-height:120px;resize:vertical}.form-select{cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.card{background:#fff;border-radius:16px;box-shadow:0 4px 20px #0000001a;padding:24px;margin:16px;border:1px solid var(--border-color);transition:all .3s ease}.card:hover{box-shadow:0 8px 30px #00000026;transform:translateY(-2px)}.card-header{border-bottom:1px solid var(--border-color);padding-bottom:16px;margin-bottom:16px}.card-title{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.card-subtitle{font-size:14px;color:var(--text-secondary);margin-top:4px}.alert,.message{padding:16px 20px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;gap:12px;font-weight:500;font-size:14px}.alert-success,.message.success{background:linear-gradient(135deg,#10b9811a,#10b9810d);color:var(--success-color);border:1px solid rgba(16,185,129,.3)}.alert-error,.message.error{background:linear-gradient(135deg,#ef44441a,#ef44440d);color:var(--error-color);border:1px solid rgba(239,68,68,.3)}.alert-warning,.message.warning{background:linear-gradient(135deg,#f59e0b1a,#f59e0b0d);color:var(--warning-color);border:1px solid rgba(245,158,11,.3)}.alert-info,.message.info{background:linear-gradient(135deg,#25d3661a,#25d3660d);color:var(--primary-color);border:1px solid rgba(37,211,102,.3)}.badge,.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;gap:4px}.badge-success,.status-badge.synced,.status-badge.in-stock{background:linear-gradient(135deg,var(--success-color),#059669);color:#fff}.status-badge.in-stock{background-color:#d1fae5;color:#065f46;text-transform:none}.badge-error,.status-badge.out-of-stock{background-color:#fee2e2;color:#991b1b;text-transform:none}.badge-warning,.status-badge.pending{background-color:#fef3c7;color:#92400e;text-transform:none}.badge-info{background:linear-gradient(135deg,var(--info-color),#2563eb);color:#fff}.table{width:100%;border-collapse:collapse;margin-top:16px}.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-color)}.table th{background:linear-gradient(135deg,#f9fafb,#f3f4f6);font-weight:600;color:var(--text-primary);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.table tr:hover{background-color:#f9fafb}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.modal{background-color:#fff;border-radius:16px;box-shadow:0 25px 50px #00000040;border:1px solid var(--border-color);max-height:90vh;overflow-y:auto;width:100%;max-width:500px;scrollbar-width:auto;scrollbar-color:var(--primary-color) #f1f5f9}.modal::-webkit-scrollbar{width:10px}.modal::-webkit-scrollbar-track{background:#f8fafc;border-radius:5px}.modal::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-color) 0%,var(--primary-dark) 100%);border-radius:5px}.loading-spinner{width:48px;height:48px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:var(--text-secondary);font-weight:600;margin-top:16px}.loading-message{margin-top:15px;color:var(--text-secondary);font-size:16px;font-weight:500}.loading-app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%)}.button-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top:2px solid #fff;animation:spin .8s linear infinite;margin-right:8px;vertical-align:middle}.animate-spin{animation:spin 1s linear infinite}.fade-in{animation:fadeIn .3s ease-in-out}.slide-up{animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-container{width:100vw;margin-left:0;min-height:100vh;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);display:flex;align-items:center;justify-content:center;padding:20px}.success{color:var(--success-color)}.error{color:var(--error-color)}.warning{color:var(--warning-color)}@media (max-width: 1024px){.content-area{width:calc(100% - 80px);margin-left:80px}::-webkit-scrollbar{width:12px;height:12px}}@media (max-width: 768px){.content-area{width:100%;margin-left:0;padding-left:0}.card{margin:8px;padding:16px;border-radius:12px}.auth-container{padding:16px}.btn{padding:10px 20px;font-size:13px}::-webkit-scrollbar{width:10px;height:10px}}@media (max-width: 480px){.content-area{padding-left:0}.card{margin:4px;padding:12px;border-radius:10px}.btn{padding:8px 16px;font-size:12px}.form-input{padding:12px 14px}::-webkit-scrollbar{width:8px;height:8px}}@media (prefers-color-scheme: dark){:root{--primary-color: #25d366;--primary-dark: #128c7e;--secondary-color: #2a3942;--text-primary: #e9edef;--text-secondary: #8696a0;--border-color: #2a3942}.card{background-color:var(--secondary-color);border-color:var(--border-color)}.form-input{background-color:var(--secondary-color);border-color:var(--border-color);color:var(--text-primary)}.table th{background:linear-gradient(135deg,#2a3942,#1e2936);color:var(--text-primary)}}@media (prefers-contrast: high){.btn-primary{background:#000;color:#fff;border:2px solid #fff}.form-input:focus{border-color:#000;box-shadow:0 0 0 2px #fff}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.btn:hover,.card:hover{transform:none}}.btn:focus-visible,.form-input:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.hidden-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hidden-scrollbar::-webkit-scrollbar{display:none}body.hidden-scrollbar{-ms-overflow-style:none;scrollbar-width:none}body.hidden-scrollbar::-webkit-scrollbar{display:none}.inventory-page{min-height:100vh;height:100vh;width:100vw;background:linear-gradient(135deg,#f8fafc,#e2e8f0);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow-y:auto;margin:0;padding:0;-ms-overflow-style:none;scrollbar-width:none}.inventory-page::-webkit-scrollbar{display:none}.inventory-content{width:100%;height:calc(100vh - 140px);margin:0;padding:0;display:flex;align-items:center;justify-content:center}.form-container{background-color:#fff;border-radius:20px;box-shadow:0 10px 40px #0000001a;overflow:hidden;border:1px solid var(--border-color, #e2e8f0);width:95%;max-width:1200px;height:90%;display:flex;flex-direction:column;-ms-overflow-style:none;scrollbar-width:none}.form-container::-webkit-scrollbar{display:none}.form-content{padding:32px;flex:1;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.form-content::-webkit-scrollbar{display:none}.view-inventory-page{min-height:100vh;height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden;display:flex;flex-direction:column}.view-controls{background-color:#fff;padding:20px 24px;box-shadow:0 2px 8px #0000001a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--border-color, #e5e7eb);flex-shrink:0}.view-content{flex:1;padding:24px;max-width:1400px;margin:0 auto;width:100%;overflow:hidden;display:flex;flex-direction:column}.inventory-table-container{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;border:1px solid #f3f4f6;flex:1;overflow:auto;position:relative;-ms-overflow-style:none;scrollbar-width:none}.inventory-table-container::-webkit-scrollbar{display:none}.inventory-table{width:100%;border-collapse:collapse;min-width:1000px}.modal{max-width:1000px;max-height:90vh;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.modal::-webkit-scrollbar{display:none}.search-container{position:relative}.search-input{padding:12px 16px 12px 40px;border:2px solid var(--border-color, #e5e7eb);border-radius:12px;width:300px;font-size:14px;transition:border-color .2s ease;background-color:#fff}.search-input:focus{outline:none;border-color:var(--primary-color, #25d366)}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary, #9ca3af)}.filter-select{padding:12px 40px 12px 16px;border:2px solid var(--border-color, #e5e7eb);border-radius:12px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .2s ease;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.filter-select:focus{outline:none;border-color:var(--primary-color, #25d366)}.left-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;flex:1}.action-buttons{display:flex;gap:12px}.action-button{padding:8px;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.action-button.edit{background-color:#dbeafe;color:#1d4ed8}.action-button.edit:hover{background-color:#bfdbfe;transform:scale(1.1)}.action-button.delete{background-color:#fee2e2;color:#dc2626}.action-button.delete:hover{background-color:#fecaca;transform:scale(1.1)}.table-header{background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-bottom:2px solid var(--border-color, #e5e7eb);position:sticky;top:0;z-index:10}.table-header th{padding:16px 20px;text-align:left;font-weight:600;color:var(--text-primary, #374151);font-size:12px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:linear-gradient(135deg,#f9fafb,#f3f4f6)}.table-cell{padding:16px 20px;border-bottom:1px solid #f3f4f6;vertical-align:middle}.table-row{transition:background-color .15s ease}.table-row:hover{background-color:#f9fafb}.product-image{width:64px;height:64px;object-fit:cover;border-radius:12px;border:2px solid var(--border-color, #e5e7eb);transition:transform .2s ease}.product-image:hover{transform:scale(1.05)}.product-placeholder{width:64px;height:64px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center;border-radius:12px;border:2px solid var(--border-color, #e5e7eb)}.product-details{max-width:300px}.product-name{font-size:14px;font-weight:600;color:var(--text-primary, #111827);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-id{font-size:12px;color:var(--text-secondary, #6b7280);margin:0 0 4px}.product-description{font-size:12px;color:var(--text-secondary, #9ca3af);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.inventory-info{display:flex;flex-direction:column;gap:4px}.inventory-quantity{font-size:14px;color:var(--text-primary, #374151);margin:0}.inventory-litres{font-size:12px;color:var(--text-secondary, #6b7280);margin:0}.pricing-info{display:flex;flex-direction:column}.product-price{font-size:14px;font-weight:600;color:var(--success-color, #059669);margin:0 0 4px}.product-condition{font-size:12px;color:var(--text-secondary, #6b7280);margin:0;text-transform:capitalize}.action-buttons-cell{display:flex;gap:8px}.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:.5px;gap:4px}.status-badge.synced{background-color:#d1fae5;color:#065f46}.status-badge.pending{background-color:#fef3c7;color:#92400e}.status-badge.in-stock{background-color:#d1fae5;color:#065f46}.status-badge.out-of-stock{background-color:#fee2e2;color:#991b1b}.empty-state{text-align:center;padding:64px 32px;background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;margin:auto}.empty-state-icon{width:96px;height:96px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.empty-state-title{font-size:20px;font-weight:600;color:var(--text-primary, #1f2937);margin-bottom:8px}.empty-state-description{color:var(--text-secondary, #6b7280);margin-bottom:24px;line-height:1.5}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;padding:40px}.loading-spinner{width:48px;height:48px;border:4px solid var(--border-color, #e5e7eb);border-top:4px solid var(--primary-color, #25d366);border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:var(--text-secondary, #6b7280);font-weight:600;margin-top:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.inventory-content{padding:16px}.form-container{width:98%;height:95%}.view-content{padding:16px}}@media (max-width: 768px){.inventory-page{height:100vh}.inventory-content{height:calc(100vh - 120px);padding:8px}.form-container{width:100%;height:100%;border-radius:12px}.form-content{padding:16px}.view-inventory-page{height:100vh}.view-controls{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.left-controls{flex-direction:column;align-items:stretch;gap:12px}.search-input{width:100%}.action-buttons{flex-direction:column;width:100%}.action-buttons button{width:100%;justify-content:center}.view-content{padding:12px}.inventory-table{min-width:800px}.table-cell{padding:8px 4px;font-size:12px}.product-image{width:48px;height:48px}}@media (max-width: 480px){.form-content{padding:12px}.form-section{padding:16px;margin-bottom:16px}.inventory-table{min-width:700px}.modal{margin:0 8px;max-width:calc(100vw - 16px)}}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}.app-container{display:flex;height:100vh;margin:0;padding:0;overflow:hidden}.sidebar-navigation{width:80px;background:linear-gradient(to bottom,#fff,#f8fafc);height:100vh;position:fixed;left:0;top:0;z-index:1000;display:flex;flex-direction:column;align-items:center;padding:20px 0;box-shadow:0 0 50px #6366f133,inset 0 0 50px #4f46e51a,0 8px 32px #00000026;border-right:1px solid rgba(148,163,184,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:box-shadow .3s cubic-bezier(.4,0,.2,1);overflow:visible}.sidebar-navigation:hover{box-shadow:0 0 60px #6366f14d,inset 0 0 60px #4f46e526,0 12px 40px #0003}.floating-orb{position:absolute;border-radius:50%;filter:blur(1px);animation:float 6s ease-in-out infinite}.orb-1{width:4px;height:4px;background:radial-gradient(circle,#8b5cf6 0%,transparent 70%);top:20%;left:20%;animation-delay:0s}.orb-2{width:3px;height:3px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);top:60%;right:25%;animation-delay:2s}.orb-3{width:2px;height:2px;background:radial-gradient(circle,#f59e0b 0%,transparent 70%);bottom:30%;left:30%;animation-delay:4s}.logo{width:50px;height:50px;margin-bottom:40px;display:flex;justify-content:center;align-items:center;border-radius:50px;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.logo .logo-image{width:45px;height:45px;object-fit:contain;border-radius:55px;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;position:relative}.logo:hover .logo-image{transform:scale(1.1)}.logo-icon,.logo .fallback-icon{color:#6366f1;font-size:22px;filter:drop-shadow(0 0 8px rgba(99,102,241,.5));transition:all .3s ease;z-index:2;position:relative}.logo-glow{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;background:radial-gradient(circle,rgba(99,102,241,.3) 0%,transparent 70%);border-radius:50%;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.logo:hover .logo-glow{opacity:1}.nav-links{display:flex;flex-direction:column;width:100%;gap:24px;padding:20px 0 0;flex-grow:1;justify-content:flex-start;align-items:center;margin-top:0}.nav-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;text-decoration:none;border-radius:14px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer;border:1px solid transparent;overflow:visible}.nav-item:nth-child(1){background:#6366f11f;color:#6366f1;border-color:#6366f133}.nav-item:nth-child(1):hover{background:#6366f133;color:#4f46e5;transform:scale(1.05) translateY(-1px);border-color:#6366f166;box-shadow:0 6px 20px #6366f140}.nav-item:nth-child(2){background:#10b9811f;color:#10b981;border-color:#10b98133}.nav-item:nth-child(2):hover{background:#10b98133;color:#059669;transform:scale(1.05) translateY(-1px);border-color:#10b98166;box-shadow:0 6px 20px #10b98140}.nav-item:nth-child(3){background:#f59e0b1f;color:#f59e0b;border-color:#f59e0b33}.nav-item:nth-child(3):hover{background:#f59e0b33;color:#d97706;transform:scale(1.05) translateY(-1px);border-color:#f59e0b66;box-shadow:0 6px 20px #f59e0b40}.nav-item:nth-child(4){background:#8b5cf61f;color:#8b5cf6;border-color:#8b5cf633}.nav-item:nth-child(4):hover{background:#8b5cf633;color:#7c3aed;transform:scale(1.05) translateY(-1px);border-color:#8b5cf666;box-shadow:0 6px 20px #8b5cf640}.nav-item:nth-child(5){background:#06b6d41f;color:#06b6d4;border-color:#06b6d433}.nav-item:nth-child(5):hover{background:#06b6d433;color:#0891b2;transform:scale(1.05) translateY(-1px);border-color:#06b6d466;box-shadow:0 6px 20px #06b6d440}.nav-item:nth-child(6){background:#ec48991f;color:#ec4899;border-color:#ec489933}.nav-item:nth-child(6):hover{background:#ec489933;color:#db2777;transform:scale(1.05) translateY(-1px);border-color:#ec489966;box-shadow:0 6px 20px #ec489940}.nav-item.active{transform:scale(1.03);box-shadow:0 0 15px #6366f14d,0 6px 20px #6366f126}.nav-icon{font-size:18px;min-width:18px;display:flex;justify-content:center;transition:all .3s ease;filter:drop-shadow(0 0 4px rgba(0,0,0,.1));z-index:2;position:relative}.active-indicator{position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:linear-gradient(to bottom,#6366f1,#4f46e5);border-radius:2px;box-shadow:0 0 8px #6366f199}.nav-item[data-tooltip]:hover:after,.logout-button[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;left:65px;top:50%;transform:translateY(-50%) scale(1);background:linear-gradient(135deg,#1e293bf2,#334155f2);color:#fff;padding:10px 14px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap;z-index:1001;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);box-shadow:0 6px 25px #0000004d,0 0 15px #ffffff1a;opacity:1;visibility:visible;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.logout-button{width:56px;height:56px;background:#ef444426;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(239,68,68,.3);color:#ef4444;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible;margin-top:auto;margin-bottom:15px;box-shadow:0 4px 15px #ef444426}.logout-button:hover{background:#ef444433;border-color:#ef444480;transform:scale(1.05);box-shadow:0 6px 20px #ef444440}.logout-glow{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;background:radial-gradient(circle,rgba(239,68,68,.3) 0%,transparent 70%);border-radius:50%;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.logout-button:hover .logout-glow{opacity:1}.content-area{margin-left:80px;width:calc(100% - 80px);height:100vh;overflow:auto;background:#f8fafc;min-height:100vh;padding:0;flex:1}@media (max-width: 768px){.sidebar-navigation{width:70px;padding:15px 0}.content-area{margin-left:70px;width:calc(100% - 70px)}.logo{width:42px;height:42px;margin-bottom:30px}.logo .logo-image{width:30px;height:30px}.logo-icon,.logo .fallback-icon{font-size:18px}.nav-item{width:42px;height:42px}.logout-button{width:48px;height:48px;margin-bottom:10px}}@media (prefers-color-scheme: dark){.logo .logo-image{filter:drop-shadow(0 2px 8px rgba(255,255,255,.1))}.logo:hover .logo-image{filter:drop-shadow(0 4px 12px rgba(255,255,255,.2))}}.loading-app{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#6366f1,#8b5cf6,#06b6d4,#10b981,#f59e0b);color:#fff}@keyframes gridPulse{0%,to{opacity:.3}50%{opacity:.6}}@keyframes float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}