/* ========================================================= MEHFARO CHAT - FINAL REFERENCE DESIGN CSS ONLY - NO LOGIC CHANGES ========================================================= */ :root { --mf-teal: #056b63; --mf-teal-dark: #004f49; --mf-green-soft: #eafff1; --mf-cream: #fbf7ee; --mf-gold: #dca536; --mf-ink: #111827; --mf-muted: #7b8190; --mf-line: #e7e9e8; } /* ========================================================= MAIN CHAT DRAWER ========================================================= */ #cartDrawer.mf-purchase-view-chat { width: min(560px, 100%) !important; max-width: 560px !important; height: 100dvh !important; background: #f7f7f4 !important; } /* ========================================================= WHITE TOP HEADER ========================================================= */ #cartDrawer.mf-purchase-view-chat .cart-header { position: relative !important; display: flex !important; align-items: center !important; min-height: 94px !important; padding: 15px 46px 14px 12px !important; background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #eeeeec !important; color: var(--mf-ink) !important; box-shadow: 0 5px 18px rgba(15, 23, 42, .06) !important; } /* BACK ARROW */ #cartDrawer.mf-purchase-view-chat #closeCart { order: -1 !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: transparent !important; font-size: 0 !important; } #cartDrawer.mf-purchase-view-chat #closeCart::before { content: "←"; color: #101828; font-size: 34px; font-weight: 300; line-height: 1; } /* BRAND AREA */ #cartDrawer.mf-purchase-view-chat .cart-header > div { position: relative !important; flex: 1 !important; min-width: 0 !important; padding-left: 58px !important; } /* ROUND M LOGO */ #cartDrawer.mf-purchase-view-chat .cart-header > div::before { content: "M" !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 50px !important; height: 50px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: linear-gradient( 135deg, #075f59, #003c39 ) !important; color: #e8ba53 !important; font-family: Georgia, serif !important; font-size: 29px !important; font-weight: 400 !important; } /* TITLE */ #cartDrawer.mf-purchase-view-chat .cart-header h2 { margin: 0 !important; font-size: 0 !important; } #cartDrawer.mf-purchase-view-chat .cart-header h2::after { content: "MEHFARO Order Support"; color: var(--mf-ink); font-size: 18px; font-weight: 900; letter-spacing: -.02em; } /* ONLINE LINE */ #cartDrawer.mf-purchase-view-chat .cart-header small { display: block !important; margin-top: 3px !important; font-size: 0 !important; } #cartDrawer.mf-purchase-view-chat .cart-header small::after { content: "● Online · Usually replies in minutes"; color: #858b98; font-size: 11px; font-weight: 500; letter-spacing: 0; } /* THREE DOT MENU */ #cartDrawer.mf-purchase-view-chat .cart-header::after { content: "⋮"; position: absolute; right: 17px; top: 31px; color: #182033; font-size: 26px; font-weight: 800; line-height: 1; } /* ========================================================= CART / CHAT PILLS ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px 15px 14px !important; margin: 0 !important; background: #ffffff !important; border-bottom: 1px solid #efefed !important; box-shadow: 0 7px 20px rgba(15, 23, 42, .05) !important; } #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs button { min-height: 47px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 0 15px !important; border: 1px solid #ece5d7 !important; border-radius: 999px !important; background: var(--mf-cream) !important; color: #202634 !important; font-size: 14px !important; font-weight: 850 !important; box-shadow: none !important; } #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs button.active { border-color: var(--mf-teal) !important; background: linear-gradient( 135deg, #08766e, #005c56 ) !important; color: #ffffff !important; box-shadow: 0 5px 14px rgba(5, 107, 99, .17) !important; } /* ========================================================= CHAT BACKGROUND ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-messages { padding: 14px 13px 18px !important; background: #f8f8f5 !important; } /* ========================================================= ORDER RECEIPT ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .order-card-bubble { width: 100% !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card { width: 100% !important; padding: 12px !important; overflow: hidden !important; border: 1px solid #d3f0dd !important; border-radius: 20px !important; background: linear-gradient( 135deg, #eefff3, #e4fbed ) !important; box-shadow: 0 5px 16px rgba(36, 112, 80, .07) !important; } /* ========================================================= ORDER CONFIRMED HEADER ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0 0 10px !important; padding: 2px 2px 10px !important; border-bottom: 1px solid rgba(5, 107, 99, .10) !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head strong { position: relative !important; padding-left: 31px !important; color: #111827 !important; font-size: 17px !important; font-weight: 900 !important; line-height: 1.2 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head strong::before { content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #08786e; color: #ffffff; font-size: 15px; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head span { padding: 5px 10px !important; border: 1px solid #eac86f !important; border-radius: 999px !important; background: #fff2c8 !important; color: #895e13 !important; font-size: 9px !important; font-weight: 900 !important; } /* ========================================================= PRODUCT LIST ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table { width: 100% !important; padding: 0 !important; overflow: visible !important; background: transparent !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table table, #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody { display: block !important; width: 100% !important; border: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table thead { display: none !important; } /* PRODUCT CARD */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr { position: relative !important; display: block !important; min-height: 116px !important; margin: 0 0 9px !important; padding: 12px 88px 12px 108px !important; border: 1px solid #e3e7e5 !important; border-radius: 14px !important; background: #ffffff !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr:last-child { margin-bottom: 0 !important; } /* RESET CELLS */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr td { display: block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* PRODUCT IMAGE */ #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image { position: absolute !important; left: 11px !important; top: 11px !important; width: 84px !important; height: 94px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image img, #cartDrawer.mf-purchase-view-chat .mf-product-image-fallback { width: 84px !important; height: 94px !important; display: block !important; object-fit: contain !important; border-radius: 11px !important; background: #f1f2f1 !important; } /* PRODUCT NAME */ #cartDrawer.mf-purchase-view-chat .mf-receipt-product-name { display: block !important; margin: 1px 0 9px !important; padding-right: 6px !important; color: #111827 !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.25 !important; white-space: normal !important; word-break: normal !important; text-transform: none !important; letter-spacing: 0 !important; } /* DETAILS */ #cartDrawer.mf-purchase-view-chat .mf-receipt-detail-grid { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 6px 14px !important; width: 100% !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-detail { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 5px !important; align-items: baseline !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #252b36 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.35 !important; word-break: normal !important; text-transform: none !important; letter-spacing: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-detail b { color: #7b8290 !important; font-size: 9px !important; font-weight: 600 !important; white-space: nowrap !important; text-transform: none !important; letter-spacing: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-detail.sku { grid-column: 1 / -1 !important; } /* PRODUCT PRICE RIGHT */ #cartDrawer.mf-purchase-view-chat .mf-receipt-price { position: absolute !important; right: 12px !important; top: 14px !important; width: auto !important; text-align: right !important; white-space: nowrap !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-price strong { color: #056b63 !important; font-size: 13px !important; font-weight: 900 !important; } /* ========================================================= TOTALS ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 10px 0 0 !important; overflow: hidden !important; border: 1px solid rgba(15, 23, 42, .06) !important; border-radius: 13px !important; background: rgba(255,255,255,.82) !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span { padding: 9px 7px !important; color: #6f7683 !important; font-size: 9px !important; text-align: center !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span + span { border-left: 1px solid #e6e8e7 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals strong { display: block !important; margin-top: 4px !important; color: #111827 !important; font-size: 13px !important; font-weight: 900 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span:last-child { background: #dff6ed !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span:last-child strong { color: #056b63 !important; } /* ========================================================= BUYER INFORMATION ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-address { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px 15px !important; margin: 9px 0 0 !important; padding: 37px 12px 12px !important; border: 1px solid #e3e7e5 !important; border-radius: 13px !important; background: #ffffff !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address::before { content: "👤 Buyer Information"; position: absolute; left: 12px; top: 10px; color: #111827; font-size: 12px; font-weight: 900; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address span { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address span.address { grid-column: 1 / -1 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address small { color: #7b8290 !important; font-size: 9px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address strong { color: #252b36 !important; font-size: 10px !important; font-weight: 650 !important; } /* ========================================================= CHAT BUBBLES ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-message.owner { position: relative !important; padding-left: 42px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-message.owner::before { content: "M"; position: absolute; left: 0; bottom: 1px; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #004f49; color: #e7b44e; font-family: Georgia, serif; font-size: 19px; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-message.owner .mf-order-chat-bubble { background: #ffffff !important; border: 1px solid #e5e7e6 !important; border-radius: 17px 17px 17px 5px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-message.customer .mf-order-chat-bubble:not(.order-card-bubble) { background: #ddfae8 !important; border: 1px solid #ccefd9 !important; border-radius: 17px 17px 5px 17px !important; } /* ========================================================= BOTTOM COMPOSER ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-form { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 46px !important; gap: 7px !important; align-items: center !important; padding: 9px 11px calc( 9px + env(safe-area-inset-bottom) ) !important; border-top: 1px solid #e9eae9 !important; background: #ffffff !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-attach-button { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; border: 1px solid #e1e4e3 !important; border-radius: 50% !important; background: #ffffff !important; } #cartDrawer.mf-purchase-view-chat [data-chat-input] { width: 100% !important; height: 43px !important; padding: 0 14px !important; border: 1px solid #e0e3e2 !important; border-radius: 999px !important; background: #ffffff !important; font-size: 12px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-form button[type="submit"] { width: 46px !important; min-width: 46px !important; height: 46px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 50% !important; background: #087269 !important; color: transparent !important; font-size: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-form button[type="submit"]::after { content: "➤"; color: #ffffff; font-size: 20px; } /* ========================================================= SMALL PHONE ========================================================= */ @media (max-width: 430px) { #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr { min-height: 105px !important; padding: 10px 72px 10px 92px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image { left: 9px !important; top: 9px !important; width: 72px !important; height: 82px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image img { width: 72px !important; height: 82px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-detail-grid { gap: 5px 8px !important; } } /* ========================================================= MEHFARO FINAL ALIGNMENT PATCH V2 ========================================================= */ /* ========================= HEADER ORDER ========================= */ #cartDrawer.mf-purchase-view-chat .cart-header { gap: 8px !important; } #cartDrawer.mf-purchase-view-chat #closeCart { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: -1 !important; margin: 0 7px 0 0 !important; } #cartDrawer.mf-purchase-view-chat .cart-header > div { display: flex !important; flex-direction: column !important; justify-content: center !important; } #cartDrawer.mf-purchase-view-chat .cart-header h2 { order: 1 !important; } #cartDrawer.mf-purchase-view-chat .cart-header small { order: 2 !important; margin-top: 3px !important; } /* ========================= PRODUCT CARD TRUE 3 COLUMN ========================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr { display: grid !important; grid-template-columns: 90px minmax(0, 1fr) auto !important; gap: 12px !important; align-items: start !important; min-height: 0 !important; padding: 10px !important; } /* IMAGE COLUMN */ #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image { position: static !important; grid-column: 1 !important; width: 90px !important; height: auto !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image img, #cartDrawer.mf-purchase-view-chat .mf-product-image-fallback { width: 90px !important; height: 100px !important; } /* DETAILS COLUMN */ #cartDrawer.mf-purchase-view-chat .mf-receipt-details { position: static !important; grid-column: 2 !important; min-width: 0 !important; padding-top: 2px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-name { margin: 0 0 9px !important; font-size: 15px !important; } /* PRICE COLUMN */ #cartDrawer.mf-purchase-view-chat .mf-receipt-price { position: static !important; grid-column: 3 !important; width: auto !important; min-width: 78px !important; padding-top: 3px !important; text-align: right !important; } /* REMOVE OLD ABSOLUTE SPACE */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr { padding-left: 10px !important; padding-right: 10px !important; } /* MOBILE */ @media (max-width: 430px) { #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr { grid-template-columns: 78px minmax(0, 1fr) auto !important; gap: 9px !important; padding: 9px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image { width: 78px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-product-image img, #cartDrawer.mf-purchase-view-chat .mf-product-image-fallback { width: 78px !important; height: 88px !important; } #cartDrawer.mf-purchase-view-chat .mf-receipt-price { min-width: 68px !important; } } /* ========================================================= DUPLICATE UI CLEANUP ========================================================= */ /* Old extra M logo remove */ #cartDrawer.mf-purchase-view-chat .cart-header::before { content: none !important; display: none !important; } /* Old generic message composer remove. Sirf real order chat composer rahega. */ #cartDrawer.mf-purchase-view-chat:has(#mfUnifiedOrderChatDock) .mf-unified-chat-composer { display: none !important; } /* Old send arrow remove. Final ::after arrow hi visible rahe. */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-form button[type="submit"]::before { content: none !important; display: none !important; } /* ========================================================= CHAT MESSAGE ALIGNMENT FIX ========================================================= */ /* OWNER MESSAGE ROW */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.owner { display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; width: 100% !important; padding-left: 0 !important; margin: 0 0 10px !important; } /* OWNER M AVATAR - OUTSIDE BUBBLE */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.owner::before { position: static !important; inset: auto !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; margin: 0 8px 2px 0 !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #004f49 !important; color: #e7b44e !important; font-family: Georgia, serif !important; font-size: 20px !important; line-height: 1 !important; transform: none !important; } /* OWNER BUBBLE */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.owner .mf-order-chat-bubble { width: fit-content !important; max-width: 76% !important; margin: 0 !important; padding: 10px 13px !important; border: 1px solid #e4e7e6 !important; border-radius: 17px 17px 17px 5px !important; background: #ffffff !important; color: #172025 !important; box-shadow: 0 3px 10px rgba(15, 23, 42, .06) !important; } /* CUSTOMER ROW */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer { display: flex !important; justify-content: flex-end !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } /* CUSTOMER NORMAL BUBBLE */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer .mf-order-chat-bubble:not(.order-card-bubble) { width: fit-content !important; max-width: 76% !important; margin-left: auto !important; padding: 10px 13px !important; border: 1px solid #ccefd9 !important; border-radius: 17px 17px 5px 17px !important; background: #ddfae8 !important; color: #172025 !important; } /* MESSAGE TEXT */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-bubble p { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; text-align: left !important; white-space: pre-wrap !important; word-break: normal !important; overflow-wrap: break-word !important; } /* TIME */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-bubble > small { display: block !important; margin-top: 5px !important; color: #858b92 !important; font-size: 9px !important; line-height: 1 !important; text-align: right !important; } /* SYSTEM MESSAGE */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.system { display: flex !important; justify-content: center !important; width: 100% !important; margin: 8px 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.system .mf-order-chat-bubble { width: fit-content !important; max-width: 82% !important; padding: 7px 12px !important; border: 1px solid #ecd18a !important; border-radius: 999px !important; background: #fff6dc !important; color: #30353a !important; box-shadow: none !important; } /* ========================================================= REFERENCE ORDER HEADER ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 14px !important; align-items: start !important; width: 100% !important; margin: 0 0 12px !important; padding: 2px 3px 11px !important; border-bottom: 1px solid rgba(5, 107, 99, .11) !important; } /* LEFT SIDE */ #cartDrawer.mf-purchase-view-chat .mf-order-head-left { min-width: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-head-left strong { position: relative !important; display: block !important; padding-left: 35px !important; color: #111827 !important; font-size: 18px !important; font-weight: 900 !important; line-height: 1.25 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-head-left strong::before { content: "✓"; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 28px !important; height: 28px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #08776d !important; color: #ffffff !important; font-size: 17px !important; font-weight: 900 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-head-left small { display: block !important; margin: 7px 0 0 !important; color: #737b88 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: 0 !important; } /* RIGHT SIDE */ #cartDrawer.mf-purchase-view-chat .mf-order-head-right { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 8px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-head-right span { display: block !important; padding: 5px 10px !important; border: 1px solid #eccb73 !important; border-radius: 999px !important; background: #fff2c9 !important; color: #8c6015 !important; font-size: 9px !important; font-weight: 900 !important; white-space: nowrap !important; } #cartDrawer.mf-purchase-view-chat .mf-order-head-right b { display: block !important; color: #056b63 !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1.1 !important; white-space: nowrap !important; } /* ========================================= DESKTOP PAR BHI MOBILE STYLE CHAT FRAME ========================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock, #cartDrawer.mf-purchase-view-chat .mf-chat-shell, #cartDrawer.mf-purchase-view-chat .mf-chat-wrapper { width: 100% !important; max-width: 430px !important; margin: 0 auto !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-body, #cartDrawer.mf-purchase-view-chat .mf-chat-thread, #cartDrawer.mf-purchase-view-chat .mf-chat-messages { width: 100% !important; max-width: 430px !important; margin: 0 auto !important; } /* ========================================================= MEHFARO CHAT - LAYOUT CLEANUP V3 ========================================================= */ /* 1) DESKTOP/TABLET PAR CONTENT KO SQUEEZE NA KARO Layout mobile-style hi rahega, lekin available drawer width use karega. ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock, #cartDrawer.mf-purchase-view-chat .mf-chat-shell, #cartDrawer.mf-purchase-view-chat .mf-chat-wrapper, #cartDrawer.mf-purchase-view-chat .mf-chat-body, #cartDrawer.mf-purchase-view-chat .mf-chat-thread, #cartDrawer.mf-purchase-view-chat .mf-chat-messages { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= 2) CART / CHAT TABS THINNER ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs { gap: 7px !important; padding: 6px 12px 8px !important; min-height: 0 !important; box-shadow: 0 3px 10px rgba(15,23,42,.04) !important; } #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs button { min-height: 36px !important; height: 36px !important; padding: 0 14px !important; font-size: 13px !important; border-radius: 999px !important; } /* ========================================================= 3) PRODUCTS KO ONE BIG TABLE JAISA MAT DIKHAO Har product visually separate card rahe. ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table { margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; background: transparent !important; box-shadow: none !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table table, #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody { border: 0 !important; background: transparent !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody { display: grid !important; gap: 9px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr { margin: 0 !important; border: 1px solid #e3e8e6 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(15,23,42,.04) !important; } /* ========================================================= 4) YELLOW LINE REMOVE ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals { margin-top: 9px !important; border-top: 0 !important; box-shadow: none !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table + .mf-chat-order-totals { border-top: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table::after, #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals::before { content: none !important; display: none !important; } /* ========================================================= 5) COMPOSER DIRECT CHAT KA HISSA Outer white dabba/strip remove. ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-right { background: #f8f8f5 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-messages { background: #f8f8f5 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-form { position: sticky !important; bottom: 0 !important; width: 100% !important; margin: 0 !important; padding: 8px 11px calc(9px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: 0 !important; border-radius: 0 !important; background: #f8f8f5 !important; box-shadow: none !important; } /* ATTACH DIRECTLY IN CHAT */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-attach-button { box-shadow: none !important; } /* TYPE MESSAGE PILL */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock [data-chat-input] { background: #ffffff !important; border: 1px solid #dde2e0 !important; box-shadow: none !important; } /* SEND DIRECTLY IN CHAT */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-form button[type="submit"] { box-shadow: 0 3px 8px rgba(5,107,99,.16) !important; } /* ========================================================= PRODUCT CARD - TRUE REFERENCE LAYOUT IMAGE LEFT / DETAILS CENTER / PRICE RIGHT ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table > table { display: block !important; width: 100% !important; border: 0 !important; background: transparent !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table > table > tbody { display: grid !important; width: 100% !important; gap: 9px !important; background: transparent !important; } /* EACH PRODUCT = ITS OWN CARD */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table > table > tbody > tr { display: grid !important; grid-template-columns: 92px minmax(0, 1fr) 82px !important; grid-template-areas: "image details price" !important; column-gap: 12px !important; align-items: start !important; width: 100% !important; min-width: 0 !important; min-height: 118px !important; margin: 0 !important; padding: 11px !important; border: 1px solid #e1e7e4 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(15, 23, 42, .035) !important; } /* REMOVE ALL OLD TABLE CELL BEHAVIOUR */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table > table > tbody > tr > td { position: static !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* ========================= IMAGE LEFT ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-image { grid-area: image !important; position: static !important; width: 92px !important; height: 102px !important; margin: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-image img, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-product-image-fallback { display: block !important; width: 92px !important; height: 102px !important; margin: 0 !important; object-fit: contain !important; border-radius: 11px !important; background: #f2f3f2 !important; } /* ========================= DETAILS CENTER ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-details { grid-area: details !important; display: block !important; min-width: 0 !important; width: 100% !important; padding-top: 2px !important; text-align: left !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-name { display: block !important; width: 100% !important; margin: 0 0 9px !important; color: #111827 !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.2 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; text-transform: none !important; letter-spacing: 0 !important; } /* DETAILS TWO COLUMNS */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 13px !important; width: 100% !important; min-width: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 5px !important; align-items: baseline !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #273039 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; text-transform: none !important; letter-spacing: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail b { margin: 0 !important; color: #7b8490 !important; font-size: 9px !important; font-weight: 600 !important; white-space: nowrap !important; text-transform: none !important; letter-spacing: 0 !important; } /* SKU FULL WIDTH */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail.sku { grid-column: 1 / -1 !important; } /* ========================= PRICE RIGHT ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-price { grid-area: price !important; position: static !important; width: 82px !important; min-width: 82px !important; padding-top: 2px !important; text-align: right !important; white-space: nowrap !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-price strong { display: block !important; color: #056b63 !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1.2 !important; text-align: right !important; } /* ========================= SMALL SCREEN ========================= */ @media (max-width: 420px) { #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table > table > tbody > tr { grid-template-columns: 78px minmax(0, 1fr) 68px !important; column-gap: 8px !important; padding: 9px !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-image, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-image img, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-product-image-fallback { width: 78px !important; height: 88px !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-price { width: 68px !important; min-width: 68px !important; } } /* ========================================================= STEP 1 — Receipt ko single light-green WhatsApp bubble banao ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-card, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-receipt-card { background: #eefaf1 !important; border: 1px solid #d9ecdf !important; border-radius: 24px !important; box-shadow: none !important; padding: 14px !important; overflow: hidden !important; } /* Receipt ke andar wale sections transparent rahen taake sab ek hi green bubble ka hissa lagen */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-header, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-products, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-totals, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-summary, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-meta, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-buyer, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-buyer-info { background: transparent !important; border: none !important; box-shadow: none !important; } /* Har product alag white card ho — ek giant table na lage */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-products > *, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-products > *, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-ref-products > * { background: #ffffff !important; border: 1px solid #e5ece7 !important; border-radius: 18px !important; box-shadow: none !important; margin: 0 0 12px 0 !important; padding: 14px !important; } /* Buyer info bhi white card ke andar lage */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-buyer, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-buyer-info { background: #ffffff !important; border: 1px solid #e5ece7 !important; border-radius: 18px !important; padding: 14px !important; margin-top: 10px !important; } /* Products / Delivery / Total COD ke upar wali unwanted yellow line hatao */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-totals, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-totals { border-top: none !important; box-shadow: none !important; } /* ========================================================= ORDER RECEIPT = CUSTOMER RIGHT-SIDE CHAT BUBBLE ========================================================= */ /* Whole order message row */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer:has(.order-card-bubble) { display: flex !important; justify-content: flex-end !important; align-items: flex-start !important; width: 100% !important; padding: 0 12px !important; margin: 10px 0 14px !important; } /* Outer receipt bubble */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer .order-card-bubble { width: 88% !important; max-width: 88% !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Real green receipt card */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .order-card-bubble .mf-chat-order-card { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 13px !important; border: 1px solid #d5ecdc !important; border-radius: 22px !important; background: linear-gradient( 135deg, #effff3 0%, #e7faed 100% ) !important; box-shadow: 0 4px 14px rgba(29, 105, 74, .06) !important; } /* Yellow lines/borders remove */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-head { border-bottom: 1px solid rgba(5, 107, 99, .10) !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-totals, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address { border-color: #e0e9e4 !important; } /* Order number yellow pill reference jaisa rehne do */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-head-right span { border-color: #eccb73 !important; background: #fff2c9 !important; } /* Same mobile-chat proportion on every screen */ @media (max-width: 600px) { #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer .order-card-bubble { width: 90% !important; max-width: 90% !important; } } /* ========================================================= RECEIPT WIDTH + PRODUCT DETAILS + BUYER INFO REPAIR ========================================================= */ /* Receipt right side par rahe, lekin andar enough width mile */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer .order-card-bubble { width: 96% !important; max-width: 96% !important; margin-left: auto !important; margin-right: 0 !important; } /* Green outer card */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .order-card-bubble .mf-chat-order-card { width: 100% !important; padding: 12px !important; border-radius: 20px !important; } /* ========================================================= PRODUCT CARDS ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-card-table tbody tr { display: grid !important; grid-template-columns: 82px minmax(0, 1fr) 72px !important; column-gap: 10px !important; align-items: start !important; width: 100% !important; min-height: 0 !important; padding: 10px !important; } /* Image */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-image { width: 82px !important; height: auto !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-image img, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-product-image-fallback { width: 82px !important; height: 92px !important; object-fit: contain !important; } /* Center information */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-details { min-width: 0 !important; width: 100% !important; padding: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-product-name { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.2 !important; word-break: normal !important; overflow-wrap: normal !important; } /* Proper 2-column details like reference */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px 10px !important; width: 100% !important; } /* Never break individual words into letters */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 4px !important; min-width: 0 !important; font-size: 9px !important; line-height: 1.35 !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail b { font-size: 8px !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } /* Values */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail:not(.sku) { white-space: nowrap !important; } /* SKU gets full line because physical SKUs can be long */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-detail.sku { grid-column: 1 / -1 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } /* Price */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-price { width: 72px !important; min-width: 72px !important; padding-top: 2px !important; text-align: right !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-receipt-price strong { font-size: 12px !important; white-space: nowrap !important; } /* ========================================================= TOTALS ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-totals { margin-top: 9px !important; border: 0 !important; border-radius: 12px !important; background: rgba(255,255,255,.38) !important; } /* ========================================================= BUYER INFORMATION FIX ========================================================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 16px !important; margin-top: 9px !important; /* IMPORTANT: heading ke liye upar proper space */ padding: 38px 13px 13px !important; border: 1px solid #e1e7e4 !important; border-radius: 14px !important; background: #ffffff !important; } /* Buyer Information heading */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address::before { content: "👤 Buyer Information" !important; position: absolute !important; left: 13px !important; top: 11px !important; display: block !important; color: #111827 !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.2 !important; } /* Buyer rows */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address span { display: grid !important; grid-template-columns: 55px minmax(0, 1fr) !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address span.address { grid-column: 1 / -1 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address small { font-size: 9px !important; color: #747d89 !important; white-space: nowrap !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-chat-order-address strong { min-width: 0 !important; font-size: 10px !important; color: #252c36 !important; word-break: normal !important; overflow-wrap: break-word !important; } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 430px) { #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer .order-card-bubble { width: 97% !important; max-width: 97% !important; } } /* ========================================================= CHAT MESSAGES - FINAL MOBILE STYLE ========================================================= */ /* Chat background */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-messages { padding: 14px 12px 18px !important; background: radial-gradient( circle at 24px 24px, rgba(5,107,99,.025) 0 2px, transparent 2.5px ), #f8f8f5 !important; background-size: 42px 42px !important; } /* ========================= MEHFARO MESSAGE LEFT ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.owner { display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.owner::before { content: "M" !important; position: static !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; margin: 0 8px 2px 0 !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #004f49 !important; color: #e7b44e !important; font-family: Georgia, serif !important; font-size: 20px !important; transform: none !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.owner .mf-order-chat-bubble { width: fit-content !important; max-width: 74% !important; margin: 0 !important; padding: 10px 13px !important; border: 1px solid #e3e6e5 !important; border-radius: 17px 17px 17px 5px !important; background: #ffffff !important; color: #172025 !important; box-shadow: 0 3px 10px rgba(15,23,42,.055) !important; } /* ========================= CUSTOMER MESSAGE RIGHT ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer:not(:has(.order-card-bubble)) { display: flex !important; justify-content: flex-end !important; width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.customer .mf-order-chat-bubble:not(.order-card-bubble) { width: fit-content !important; max-width: 74% !important; margin-left: auto !important; padding: 10px 13px !important; border: 1px solid #ccefd9 !important; border-radius: 17px 17px 5px 17px !important; background: linear-gradient( 135deg, #e4fced, #d9f7e5 ) !important; color: #172025 !important; box-shadow: 0 3px 9px rgba(31,120,81,.05) !important; } /* ========================= MESSAGE TEXT ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-bubble p { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; white-space: pre-wrap !important; word-break: normal !important; overflow-wrap: break-word !important; } /* TIME */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-bubble > small { display: block !important; margin-top: 5px !important; color: #858c96 !important; font-size: 9px !important; text-align: right !important; } /* ========================= SYSTEM MESSAGE CENTER ========================= */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.system { display: flex !important; justify-content: center !important; width: 100% !important; margin: 8px 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-message.system .mf-order-chat-bubble { width: fit-content !important; max-width: 82% !important; padding: 7px 12px !important; border: 1px solid #ecd28c !important; border-radius: 999px !important; background: #fff6dd !important; color: #343a40 !important; box-shadow: none !important; } /* ========================================================= CHAT FINAL SMALL POLISH ========================================================= */ /* Cart + Chat pills ke peeche wala outer box remove */ #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs { background: transparent !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; padding: 6px 12px 5px !important; } /* Type message + attach + send ko thora neeche lao */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-form { bottom: 0 !important; padding: 7px 9px 2px !important; border-top: 0 !important; box-shadow: none !important; } /* ========================================================= PREVENT CART / CHAT FLASH ON PAGE REFRESH ========================================================= */ /* Page ki first paint se hi drawer screen ke bahar rahe */ #cartDrawer.cart-drawer:not(.open) { right: 0 !important; transform: translateX(105%) !important; } /* Sirf user ke open karne par andar aaye */ #cartDrawer.cart-drawer.open { right: 0 !important; transform: translateX(0) !important; }