:root{--bg-color:#ffffff;--primary-glow:#00ffff;--secondary-glow:#ff00ff;--text-color:#e0e0e0;--user-bubble-bg:#1a1a2e;--bot-bubble-bg:#2a2a3e;--border-color:rgba(0, 255, 255, 0.2);--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--menu-bg:rgba(16, 16, 30, 0.95);--success-color:#22c55e;--error-color:#ef4444;--warning-color:#f59e0b;--header-height:60px}body{background-color:#111827;color:var(--text-color);font-family:var(--font-family);margin:0}.page-container{max-width:480px;margin:0 auto;background-color:#111827;position:relative;min-height:100vh;display:flex;flex-direction:column}.main-wrapper{padding-top:var(--header-height);padding-bottom:160px;flex-grow:1;display:flex;flex-direction:column}.header-section{background-color:rgba(10,10,15,.85);backdrop-filter:blur(10px);position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:1000;height:var(--header-height);border-bottom:1px solid var(--border-color)}.header-area{display:flex;justify-content:space-between;align-items:center;width:90%;height:100%;padding:0 1rem}.header-actions-left,.header-actions-right{display:flex;align-items:center;gap:8px}.header-icon{background:0 0;border:none;cursor:pointer;padding:5px;opacity:.7;transition:opacity .2s,transform .2s}.header-icon:hover{opacity:1;transform:scale(1.1)}.header-icon svg{width:22px;height:22px;fill:var(--text-color)}.header-icon.active svg{fill:var(--primary-glow)}#close-chat-btn-agent svg,#close-chat-btn-user svg{fill:var(--error-color)}.chat-header-content{text-align:center;flex-grow:1}.chat-header-content h1{font-size:1.2rem;margin:0;font-weight:500}.status{font-size:.75rem;margin-top:5px;transition:color .3s,opacity .3s;opacity:.9}.status.info{color:var(--primary-glow)}.status.success{color:var(--success-color)}.status.error{color:var(--error-color)}.status.warning{color:var(--warning-color)}.status.connecting{color:var(--warning-color);animation:2s infinite pulse-connecting}@keyframes pulse-connecting{0%,100%{opacity:.7}50%{opacity:1}}.chat-window{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.chat-window::-webkit-scrollbar{width:5px}.chat-window::-webkit-scrollbar-track{background:0 0}.chat-window::-webkit-scrollbar-thumb{background:var(--primary-glow);border-radius:5px}.message{max-width:90%;display:flex;flex-direction:column;animation:.4s ease-out forwards slideIn;position:relative}.message.user{align-self:flex-end;max-width:80%}.message-bubble{padding:10px 15px;border-radius:20px;line-height:1.5;font-size:.9rem;word-wrap:break-word;position:relative}.message-bubble.has-image{padding:8px}.message-bubble img{max-width:100%;border-radius:15px;margin-top:5px;display:block}.message-bubble b,.message-bubble strong{font-weight:600;color:var(--primary-glow)}.message-bubble em,.message-bubble i{font-style:italic;color:var(--secondary-glow)}.message-bubble code{background-color:rgba(0,0,0,.3);padding:2px 6px;border-radius:4px;font-family:'Courier New',Courier,monospace;display:inline-block}.message-bubble ul{margin:10px 0 0;padding-left:20px}.message-bubble li{margin-bottom:5px}.message-timestamp{font-size:.65rem;color:#888;margin-top:5px;display:flex;align-items:center;gap:5px}.message.user .message-bubble{background-color:var(--user-bubble-bg);border-bottom-right-radius:5px}.message.user .message-timestamp{text-align:right;margin-right:10px;justify-content:flex-end}.message.bot{align-self:flex-start;max-width:95%}.message.bot .message-bubble{background-color:var(--bot-bubble-bg);border-bottom-left-radius:5px}.message.bot .message-timestamp{margin-left:10px;justify-content:flex-start}.message.admin .message-bubble{background-color:#166534;border-bottom-left-radius:5px}.message.admin .message-timestamp{justify-content:flex-start}.seen-indicator{width:14px;height:14px}.seen-indicator.sent svg{fill:#888}.seen-indicator.seen svg{fill:var(--primary-glow)}.message.system{align-self:center;max-width:70%}.message.system .message-bubble{background-color:var(--secondary-glow);color:var(--bg-color);text-align:center;font-weight:500}.copy-btn{position:absolute;bottom:8px;right:-35px;background:#3a3a5e;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s,transform .2s;transform:scale(.8);z-index:5}.message.bot:hover .copy-btn{opacity:1;transform:scale(1)}.copy-btn svg{width:14px;height:14px;fill:var(--text-color)}.copy-btn.copied svg{fill:var(--primary-glow)}@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.reactions-toolbar{position:absolute;bottom:-15px;background:var(--bot-bubble-bg);border-radius:20px;padding:4px 8px;display:flex;gap:8px;box-shadow:0 2px 5px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;transform:translateY(5px);pointer-events:none;z-index:10}.message.user .reactions-toolbar{right:10px}.message.admin .reactions-toolbar,.message.bot .reactions-toolbar{left:10px}.message:hover .reactions-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}.reaction-btn{background:0 0;border:none;color:var(--text-color);cursor:pointer;font-size:14px;display:flex;align-items:center;gap:4px;transition:transform .2s,color .2s}.reaction-btn svg{fill:currentColor}.reaction-btn:hover{transform:scale(1.2)}.reaction-btn.reacted{filter:grayscale(1);pointer-events:none}.reaction-btn.delete-btn:hover{color:var(--error-color)}.typing-indicator{display:flex;gap:5px;align-items:center;padding:10px}.typing-indicator span{width:8px;height:8px;background-color:var(--primary-glow);border-radius:50%;animation:1.2s ease-in-out infinite typing}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.chat-footer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:1000;background:rgba(10,10,15,.85);backdrop-filter:blur(10px);border-top:1px solid var(--border-color);box-sizing:border-box}.suggested-replies{padding:10px 20px 15px;display:flex;gap:10px;z-index:2;flex-shrink:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary-glow) transparent}.suggested-replies::-webkit-scrollbar{height:4px}.suggested-replies::-webkit-scrollbar-track{background:0 0}.suggested-replies::-webkit-scrollbar-thumb{background:var(--primary-glow);border-radius:5px}.reply-chip{background:0 0;border:1px solid var(--border-color);color:var(--text-color);padding:8px 15px;border-radius:20px;cursor:pointer;font-size:.8rem;transition:background-color .2s,box-shadow .2s;white-space:nowrap;flex-shrink:0}.reply-chip:hover{background-color:var(--user-bubble-bg);box-shadow:0 0 10px rgba(0,255,255,.2)}.chat-input-area{padding:15px 10px;box-sizing:border-box}.input-wrapper{display:flex;align-items:center;background-color:#1a1a2e;border-radius:25px;padding:5px;position:relative}#chat-input{flex:1;min-width:0;background:0 0;border:none;outline:0;color:var(--text-color);font-size:1rem;padding:10px 5px 10px 15px;font-family:var(--font-family)}#chat-input:disabled{opacity:.5}#chat-input.error-placeholder::placeholder{color:var(--error-color)}#mic-btn,#upload-img-btn{background:0 0;border:none;cursor:pointer;padding:0 10px;opacity:.7;transition:opacity .2s}#mic-btn:hover,#upload-img-btn:hover{opacity:1}#mic-btn svg,#upload-img-btn svg{width:24px;height:24px;fill:var(--text-color)}#mic-btn.listening{animation:1.5s infinite pulse-mic-glow;border-radius:50%}@keyframes pulse-mic-glow{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,0,255,.7)}70%{transform:scale(1.1);box-shadow:0 0 10px 20px rgba(255,0,255,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,0,255,0)}}#send-button{background:linear-gradient(45deg,var(--primary-glow),var(--secondary-glow));border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .2s,box-shadow .2s;flex-shrink:0}#send-button:hover{transform:scale(1.1);box-shadow:0 0 15px var(--primary-glow)}#send-button svg{width:20px;height:20px;fill:#0a0a0f;transform:rotate(-45deg) translateX(1px)}#send-button:disabled{opacity:.5;cursor:not-allowed;transform:scale(1);box-shadow:none}#image-preview-container{display:none;padding:10px 20px 0;position:relative;flex-shrink:0}#image-preview-wrapper{position:relative;display:inline-block}#image-preview{max-height:80px;border-radius:10px;border:1px solid var(--border-color)}#remove-preview-btn{position:absolute;top:-8px;right:-8px;background:var(--secondary-glow);color:var(--bg-color);border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-weight:700;font-size:14px;line-height:24px;text-align:center;z-index:5}.offcanvas-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}.offcanvas-overlay.open{opacity:1;visibility:visible}.offcanvas-menu{position:fixed;top:0;right:-100%;width:80vw;max-width:300px;height:100%;background-color:var(--menu-bg);box-shadow:0 0 25px rgba(0,0,0,.5);transition:right .4s cubic-bezier(.25,.46,.45,.94);z-index:1002;display:flex;flex-direction:column;border-left:1px solid var(--border-color)}.offcanvas-menu.open{right:0}.offcanvas-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid var(--border-color)}.offcanvas-header h2{margin:0;font-size:1.2rem}.offcanvas-body{padding:1.5rem;flex-grow:1;overflow-y:auto}.setting{margin-bottom:25px}.setting label{display:block;margin-bottom:15px;font-weight:500;font-size:1rem}.theme-options{display:flex;justify-content:space-around;gap:10px}.theme-dot{width:35px;height:35px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s,border-color .2s}.theme-dot:hover{transform:scale(1.1)}.theme-dot.active{border-color:#fff;transform:scale(1.1)}.action-btn{display:block;width:100%;text-align:center;margin:10px 0 0;padding:12px 20px;background:var(--user-bubble-bg);border:1px solid var(--border-color);color:var(--text-color);border-radius:25px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.action-btn:hover{background-color:#2a2a3e}#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(150%);padding:12px 24px;border-radius:30px;font-size:.9rem;font-weight:500;color:#fff;z-index:2000;display:flex;align-items:center;gap:10px;opacity:0;transition:transform .4s cubic-bezier(.25,.46,.45,.94),opacity .4s;pointer-events:none}#toast.show{transform:translateX(-50%) translateY(0);opacity:1}#toast.success{background-color:var(--success-color)}#toast.error{background-color:var(--error-color)}#toast svg{width:20px;height:20px;fill:#fff}.admin-chat-notification{position:absolute;top:-100px;left:50%;transform:translateX(-50%);background-color:var(--success-color);color:#fff;padding:10px 20px;border-radius:25px;box-shadow:0 5px 15px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px;z-index:100;transition:top .5s ease-out}.admin-chat-notification.show{top:70px}.admin-chat-notification .bell-icon{animation:1.5s ease-in-out infinite ring}@keyframes ring{0%,100%{transform:rotate(0)}10%,30%,50%,70%,90%{transform:rotate(15deg)}20%,40%,60%,80%{transform:rotate(-15deg)}}.related-products-container{margin-top:15px;padding-top:10px;border-top:1px solid var(--border-color)}.related-products-title{font-size:.8em;font-weight:700;color:var(--primary-glow);margin-bottom:10px;text-align:center}.related-products-grid{display:flex;gap:10px;overflow-x:auto;padding:2px 5px 8px;scrollbar-width:thin;scrollbar-color:var(--primary-glow) transparent}.related-products-grid::-webkit-scrollbar{height:4px}.related-products-grid::-webkit-scrollbar-track{background:0 0}.related-products-grid::-webkit-scrollbar-thumb{background-color:var(--primary-glow);border-radius:4px}.related-product-card{background-color:var(--user-bubble-bg);border-radius:10px;overflow:hidden;font-size:.75em;text-align:center}.related-product-card img{width:100%;height:45px;object-fit:cover}.related-product-name{padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-summary-card{background-color:var(--user-bubble-bg);border-radius:15px;padding:12px;border-left:4px solid var(--primary-glow);cursor:pointer}.order-summary-footer,.order-summary-header,.order-summary-item{display:flex;justify-content:space-between;align-items:center}.order-summary-header{margin-bottom:10px}.order-summary-header h4{margin:0;font-size:.9em;font-weight:600}.order-summary-status{font-size:.75em;padding:3px 8px;border-radius:12px;font-weight:500}.status-delivered{background-color:#166534;color:#dcfce7}.status-shipped{background-color:#b45309;color:#fef3c7}.status-preparing{background-color:#5b21b6;color:#e9d5ff}.status-cancelled{background-color:#991b1b;color:#fee2e2}.order-summary-item img{width:40px;height:40px;border-radius:8px;object-fit:cover;margin-right:10px}.order-summary-item-details{flex-grow:1}.order-summary-item-details p{margin:0;font-size:.8em;line-height:1.4}.order-summary-footer{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-color)}.order-summary-footer p{margin:0;font-size:.8em;font-weight:500}.order-summary-price{font-size:.9em;font-weight:700;color:var(--primary-glow)}.order-history-container{display:flex;flex-direction:column;gap:10px}.order-history-item{display:flex;align-items:center;gap:12px;padding:10px;background-color:var(--user-bubble-bg);border-radius:12px;cursor:pointer}.history-item-img{width:50px;height:50px;object-fit:cover;border-radius:8px;flex-shrink:0}.history-item-details{flex-grow:1;font-size:.8em}.history-item-details p{margin:2px 0;line-height:1.4}.history-item-details .order-id-history{font-weight:600;color:var(--primary-glow)}.history-item-details .order-status-history{font-weight:500}.history-item-details .order-total-history{font-weight:700}.savings-summary-card{background-color:var(--user-bubble-bg);border-radius:15px;padding:15px;border-left:4px solid var(--secondary-glow);font-size:.85em}.savings-summary-card h4{margin:0 0 15px;font-size:1.1em;text-align:center;color:var(--secondary-glow)}.savings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:15px}.savings-item{background-color:var(--bot-bubble-bg);padding:10px;border-radius:10px;text-align:center}.savings-item .label{display:block;font-size:.8em;color:#aaa;margin-bottom:5px}.savings-item .value{font-size:1.2em;font-weight:700}.savings-item .value.saved{color:var(--success-color)}.product-list-summary{font-size:.8em;border-top:1px solid var(--border-color);padding-top:10px}.product-list-summary h5{margin:0 0 8px;font-weight:600}.product-list-summary ul{list-style-type:none;padding:0;margin:0;max-height:100px;overflow-y:auto}.product-list-summary ul::-webkit-scrollbar{width:4px}.product-list-summary ul::-webkit-scrollbar-thumb{background:var(--secondary-glow);border-radius:4px}.product-list-summary li{padding:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:1000;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity .3s}.modal-content{background:var(--menu-bg);border-radius:20px;padding:30px;text-align:center;width:80%;max-width:280px;border:1px solid var(--border-color);transform:scale(.9);transition:transform .3s}.modal-overlay.show{display:flex;opacity:1}.modal-overlay.show .modal-content{transform:scale(1)}#rating-modal h3{margin-top:0;font-size:1.2rem}.rating-stars{display:flex;justify-content:center;gap:10px;margin:25px 0}.rating-stars .star{font-size:2.5rem;color:#555;cursor:pointer;transition:color .2s,transform .2s}.rating-stars .star:hover{transform:scale(1.2);color:var(--warning-color)}.rating-stars.selected .star{color:#555}.rating-stars.selected .star.active,.rating-stars.selected .star.hovered{color:var(--warning-color)}#submit-rating-btn{background:var(--primary-glow);color:#111827;border:none;padding:12px 30px;border-radius:25px;font-size:1rem;font-weight:700;cursor:pointer;opacity:.5;pointer-events:none}#submit-rating-btn.enabled{opacity:1;pointer-events:auto}#issue-resolved-banner{display:none;padding:15px;background:var(--user-bubble-bg);text-align:center;border-top:1px solid var(--border-color)}#issue-resolved-btn{background:var(--success-color);color:#fff;border:none;padding:12px 25px;border-radius:25px;font-weight:700;cursor:pointer;font-size:1rem;width:80%;max-width:250px;margin:0 auto;display:block;transition:transform .2s}#issue-resolved-btn:active{transform:scale(.95)}.product-card-small{background-color:var(--user-bubble-bg);border-radius:10px;overflow:hidden;font-size:.7em;text-align:center;width:100px;flex-shrink:0}.product-card-small img{width:100%;height:60px;object-fit:cover}.product-card-small-name{padding:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.product-card-small-price{font-weight:700;color:var(--primary-glow);padding-bottom:5px}#initial-loader{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;color:var(--text-color);margin:auto}.loader{width:50px;height:50px;border:5px solid var(--border-color);border-top-color:var(--primary-glow);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.action-card-container{padding:5px}.action-card-text{margin:0 0 12px;font-size:.85em;opacity:.9}.action-card-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;font-size:.9em;font-weight:600;border-radius:12px;border:none;cursor:pointer;background:var(--primary-glow);color:#111;transition:transform .2s,box-shadow .2s}.action-card-button:hover{transform:scale(1.03);box-shadow:0 4px 15px rgba(0,255,255,.3)}.action-card-button svg{fill:#111}.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:2500;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity .3s}.lightbox-overlay.show{display:flex;opacity:1}.lightbox-image{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:10px;transform:scale(.9);transition:transform .3s}.lightbox-overlay.show .lightbox-image{transform:scale(1)}.close-lightbox-btn{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;font-weight:700;cursor:pointer;line-height:1}