/* ZippKart customer chat only. No global tokens or page layout changes. */
#chat-bubble.zippkart-chat-launcher {
  position: fixed; right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 50%; background: #0cb98c; color: #092d25;
  box-shadow: 0 0 0 7px rgba(12,185,140,.09), 0 5px 18px rgba(21,74,60,.16);
  z-index: 1195; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .18s ease;
}
#chat-bubble.zippkart-chat-launcher:hover { background: #0cb98c; transform: translateY(-2px); box-shadow: 0 0 0 9px rgba(12,185,140,.12), 0 7px 20px rgba(21,74,60,.18); }
#chat-bubble.zippkart-chat-launcher[aria-expanded="true"] { opacity: 0; pointer-events: none; }
#chat-panel.zippkart-chat-widget {
  position: fixed; inset: auto max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto;
  width: min(424px, calc(100% - 32px)); height: 532px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  border: 1px solid #e8eceb; border-radius: 17px; background: #fff;
  color: #19211f; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45;
  box-shadow: 0 10px 40px rgba(23,47,40,.16), 0 2px 5px rgba(23,47,40,.08);
  z-index: 1200; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(.97); transform-origin: bottom right;
  transition: opacity .2s ease, transform .24s ease, visibility 0s linear .24s;
}
#chat-panel.zippkart-chat-widget.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
#chat-panel.zippkart-chat-widget .chat-head { display: block; flex: 0 0 auto; padding: 20px 20px 18px; background: linear-gradient(165deg,#d9f3e8 0%,#f4fbf7 60%,#fff 100%); color: #19211f; font: inherit; }
#chat-panel .zk-chat-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
#chat-panel .zk-chat-logo { display: block; width: 40px; height: 36px; object-fit: contain; }
#chat-panel #chat-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: rgba(255,255,255,.32); color: #19211f; font: 20px/1 Arial,sans-serif; cursor: pointer; transition: background .18s ease; }
#chat-panel #chat-close:hover { background: rgba(255,255,255,.85); }
#chat-panel .zk-chat-greeting { margin: 0; font: 400 14px/1.5 Arial,sans-serif; color: #303a36; }
#chat-panel .zk-chat-home { padding: 4px 20px 18px; overflow: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
#chat-panel .zk-chat-intro { display: flex; align-items: center; gap: 4px; margin: 0 0 16px; padding: 3px 5px 3px 16px; min-height: 46px; box-sizing: border-box; border: 1px solid #d2dbe1; border-radius: 28px; background: #fff; transition: border-color .18s, box-shadow .18s; }
#chat-panel .zk-chat-intro:focus-within { border-color: #168c71; box-shadow: 0 0 0 3px rgba(22,140,113,.1); }
#chat-panel #zk-chat-question { width: 100%; min-width: 0; flex: 1; padding: 6px 0; border: 0; outline: none; background: transparent; box-shadow: none; font: 400 16px/1.4 Arial,sans-serif; color: #19211f; }
#chat-panel #zk-chat-question::placeholder { color: #6b7782; opacity: 1; }
#chat-panel .zk-chat-intro button { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #153b30; background: #e7f5ee; cursor: pointer; }
#chat-panel .zk-chat-intro button:hover { background: #d1ecdf; }
#chat-panel .zk-chat-label { margin: 0 0 12px; padding: 0; font: 400 13px/1.4 Arial,sans-serif; letter-spacing: 0; color: #242c29; }
#chat-panel .zk-chat-topics { display: grid; gap: 10px; }
#chat-panel .zk-chat-topic { min-height: 56px; display: flex; align-items: center; gap: 16px; padding: 7px 9px; box-sizing: border-box; text-decoration: none; color: #151c19; background: #fff; border: 1px solid #f3f4f3; border-radius: 16px; box-shadow: 0 3px 9px rgba(24,41,33,.065); font: 500 14px/1.45 Arial,sans-serif; transition: background .18s, box-shadow .18s, transform .18s; }
#chat-panel .zk-chat-topic:hover { background: #fafcfb; box-shadow: 0 4px 12px rgba(24,41,33,.11); transform: translateY(-1px); }
#chat-panel .zk-chat-tile { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; background: #d8e4fc; border: 1px solid #c4d2ed; border-radius: 10px; color: #192a40; }
#chat-panel .zk-chat-contact-label { margin-top: 18px; margin-bottom: 8px; color: #68737d; }
#chat-panel .zk-chat-contacts { display: flex; flex-wrap: wrap; gap: 8px; }
#chat-panel .zk-chat-social, #chat-panel #zk-wa { position: static; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #eceef5; border-radius: 9px; color: #4266a7; background: #f3f5fc; box-shadow: none; text-decoration: none; transition: transform .18s, background .18s; }
#chat-panel .zk-chat-social:hover { transform: translateY(-2px); background: #e9eefb; }
#chat-panel .zk-chat-instagram { color: #b63290; background: #fcf0f7; }
#chat-panel #zk-wa { color: #147c4a; background: #ecf9f1; }
#chat-panel #zk-wa svg { width: 24px; height: 24px; }
#chat-panel .zk-chat-text-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; margin: 8px 0 0; border: 0; background: transparent; color: #365e52; font: 400 12px/1.4 Arial,sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#chat-panel .zk-chat-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#chat-panel #zk-chat-back { margin: 0 20px 8px; flex: 0 0 auto; align-self: flex-start; }
#chat-panel #chat-messages { flex: 1 1 auto; min-height: 70px; padding: 16px 20px; background: #f6faf8; overflow-wrap: anywhere; }
#chat-panel .chat-msg { box-shadow: 0 1px 2px rgba(14,30,56,.06); }
#chat-panel .chat-msg.customer { background: #176e56; color: #fff; }
#chat-panel #chat-precall { padding: 12px 20px 20px; gap: 12px; }
#chat-panel #chat-precall p { color: #5e6b64; }
#chat-panel #chat-precall input { border: 1px solid #d2dbe1; border-radius: 12px; padding: 12px; font: 16px/1.4 Arial,sans-serif; }
#chat-panel #chat-precall button { border-radius: 12px; background: #176e56; min-height: 44px; }
#chat-panel #chat-precall button:hover { background: #10513f; }
#chat-panel #chat-form { margin: 10px 14px 14px; padding: 4px; gap: 4px; flex: 0 0 auto; border: 1px solid #d2dbe1; border-radius: 26px; align-items: center; background: #fff; }
#chat-panel #chat-input { width: 0; min-width: 0; flex: 1; border: 0; border-radius: 20px; background: transparent; padding: 10px; color: #19211f; font: 16px/1.4 Arial,sans-serif; }
#chat-panel #chat-form button { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #176e56; color: #fff; cursor: pointer; }
#chat-panel #chat-form #chat-attach { background: #eef6f2; color: #365e52; }
#chat-panel #chat-form:focus-within { border-color: #168c71; box-shadow: 0 0 0 3px rgba(22,140,113,.1); }
#chat-panel [hidden] { display: none !important; }
#chat-panel :is(button,a,input):focus-visible, #chat-bubble.zippkart-chat-launcher:focus-visible { outline: 2px solid #168c71; outline-offset: 3px; }
#chat-panel #zk-chat-question:focus-visible { outline: none; }
@media (max-width: 520px) {
  #chat-panel.zippkart-chat-widget { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: calc(100dvh - 24px); }
  #chat-bubble.zippkart-chat-launcher { right: max(16px, env(safe-area-inset-right)); }
  #chat-panel .chat-head { padding: 18px 18px 16px; }
  #chat-panel .zk-chat-home { padding-right: 18px; padding-left: 18px; }
  #chat-panel .zk-chat-topic { gap: 12px; }
}
/* Preserve clearance for the product page's existing sticky purchase bar. */
@media (max-width: 760px) {
  #chat-bubble.zippkart-chat-launcher.zk-chat-product { bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)); }
}
@media (prefers-reduced-motion: reduce) {
  #chat-panel.zippkart-chat-widget, #chat-bubble.zippkart-chat-launcher, #chat-panel .zk-chat-topic, #chat-panel .zk-chat-social { transition: none; transform: none; }
}