/* VM CLOTHES — Gen-Z chat widget (replaces the floating WhatsApp button). */
.vmchat { --c-ink: #0E0F11; --c-ink2: #1B1D21; --c-lime: #C8FF3D; --c-pink: #FF5FA2; --c-text: #F5F5F2; --c-mute: rgba(245,245,242,.62); --c-line: rgba(255,255,255,.12);
  --c-b: calc(18px + var(--bottom-nav-h, 0px) + var(--safe-b, 0px));
  position: fixed; right: 18px; bottom: var(--c-b); z-index: 70; font-family: var(--font, system-ui, sans-serif); color: var(--c-text); }
.vmchat *, .vmchat *::before, .vmchat *::after { box-sizing: border-box; }
.vmchat [hidden] { display: none !important; }
.vmchat button { font: inherit; cursor: pointer; }

/* Launcher */
.vmc-launch { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: var(--c-ink); color: var(--c-text);
  box-shadow: 0 10px 30px rgba(14,15,17,.32), inset 0 0 0 1px var(--c-line); transition: transform .2s ease-out; }
.vmc-launch:hover { transform: translateY(-2px) rotate(-1deg); }
.vmc-launch .vmc-ava { width: 38px; height: 38px; font-size: 20px; }
.vmc-launch b { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.vmc-dot { position: absolute; top: 4px; left: 36px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-pink); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--c-ink); }
.vmc-ava { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-lime); color: var(--c-ink); line-height: 1; }
.vmc-ava::after { content: ""; }
.vmchat.is-open .vmc-launch { display: none; }

/* Teaser — small product card that peeks above the launcher */
.vmc-teaser { position: absolute; right: 0; bottom: 64px; width: 214px; padding: 10px; border-radius: 18px; background: var(--c-ink); box-shadow: 0 18px 44px rgba(14,15,17,.35), inset 0 0 0 1px var(--c-line);
  transform-origin: 85% 100%; animation: vmcPop .45s cubic-bezier(.2,.9,.25,1.25) both; }
.vmc-teaser::after { content: ""; position: absolute; right: 30px; bottom: -6px; width: 12px; height: 12px; background: var(--c-ink); transform: rotate(45deg); }
.vmc-x { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; color: var(--c-ink); font-size: 16px; line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 2; }
.vmc-x::before { content: ""; position: absolute; inset: -9px; }
.vmc-bubble { margin: 2px 2px 8px; font-size: 12px; line-height: 1.4; font-weight: 500; }
.vmc-tcard { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #2A2C31; aspect-ratio: 4 / 5; }
.vmc-tcard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease-out, opacity .2s ease-out; }
.vmc-tcard:hover img { transform: scale(1.04); }
.vmc-tcard.swap img { opacity: 0; transform: translateX(-12px); }
.vmc-tag { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--c-lime); color: var(--c-ink); font-size: 10px; font-weight: 800; letter-spacing: .02em; transform: rotate(-4deg); }
.vmc-tmeta { display: grid; gap: 1px; margin: 8px 2px 0; font-size: 12px; line-height: 1.3; }
.vmc-tmeta b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmc-price { color: var(--c-lime); font-weight: 700; }
.vmc-price s { color: var(--c-mute); font-weight: 400; margin-left: 4px; font-size: 11px; }
.vmc-ask { margin: 6px 2px 8px; font-size: 12px; color: var(--c-mute); }
.vmc-tactions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vmc-btn { min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--c-text); font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease-out, transform .15s ease-out; }
.vmc-btn:hover { background: rgba(255,255,255,.18); }
.vmc-btn:active { transform: scale(.96); }
.vmc-btn.hot { background: var(--c-lime); color: var(--c-ink); }
.vmc-btn.hot:hover { background: #D8FF73; }

/* Chat panel */
.vmc-panel { position: absolute; right: 0; bottom: 0; width: min(370px, calc(100vw - 24px)); height: min(560px, calc(100dvh - var(--c-b) - 24px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--c-ink); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 64px rgba(14,15,17,.42), inset 0 0 0 1px var(--c-line); transform-origin: 100% 100%; animation: vmcPop .35s cubic-bezier(.2,.9,.25,1.15) both; }
.vmc-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: linear-gradient(135deg, #17191D 0%, #22252B 100%); border-bottom: 1px solid var(--c-line); }
.vmc-head .vmc-ava { width: 40px; height: 40px; font-size: 21px; }
.vmc-who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.vmc-who b { font-size: 14px; font-weight: 700; }
.vmc-who small { font-size: 11px; color: var(--c-mute); display: flex; align-items: center; gap: 6px; }
.vmc-who small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-lime); box-shadow: 0 0 0 3px rgba(200,255,61,.18); }
.vmc-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--c-text); font-size: 18px; display: grid; place-items: center; }
.vmc-close:hover { background: rgba(255,255,255,.16); }
.vmc-log { overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.vmc-msg { max-width: 84%; display: grid; gap: 3px; animation: vmcIn .25s ease-out both; }
.vmc-msg p { margin: 0; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.vmc-msg p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vmc-msg time { font-size: 10px; color: var(--c-mute); padding: 0 6px; }
.vmc-msg.bot, .vmc-msg.admin { align-self: flex-start; }
.vmc-msg.bot p { background: var(--c-ink2); border-bottom-left-radius: 6px; }
.vmc-msg.admin p { background: #2B2140; border-bottom-left-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,95,162,.35); }
.vmc-msg.admin time::before { content: "Team " ; color: var(--c-pink); font-weight: 600; }
.vmc-msg.customer { align-self: flex-end; justify-items: end; }
.vmc-msg.customer p { background: var(--c-lime); color: var(--c-ink); border-bottom-right-radius: 6px; font-weight: 500; }
.vmc-pcard { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 8px; width: 260px; max-width: 100%; border-radius: 16px; background: var(--c-ink2); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-text); text-decoration: none; }
.vmc-pcard img { width: 84px; height: 105px; object-fit: cover; border-radius: 10px; background: #2A2C31; }
.vmc-pcard div { display: grid; align-content: start; gap: 4px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.vmc-pcard b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vmc-pcard .vmc-off { justify-self: start; padding: 2px 7px; border-radius: 999px; background: var(--c-pink); color: #fff; font-size: 10px; font-weight: 800; }
.vmc-pcard .vmc-row { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.vmc-pcard .vmc-btn { min-height: 28px; font-size: 11px; padding: 0 10px; }
.vmc-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--c-ink2); }
.vmc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-mute); animation: vmcDot 1s infinite ease-in-out; }
.vmc-typing i:nth-child(2) { animation-delay: .15s; } .vmc-typing i:nth-child(3) { animation-delay: .3s; }
.vmc-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px 8px; scrollbar-width: none; }
.vmc-chips::-webkit-scrollbar { display: none; }
.vmc-chips button { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid rgba(200,255,61,.45); border-radius: 999px; background: transparent; color: var(--c-lime); font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease-out; }
.vmc-chips button:hover { background: rgba(200,255,61,.1); }
.vmc-form { display: flex; gap: 8px; align-items: center; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line); }
.vmc-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--c-text); font: inherit; font-size: 16px; outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s ease-out; }
.vmc-form input::placeholder { color: var(--c-mute); }
.vmc-form input:focus { box-shadow: inset 0 0 0 1px rgba(200,255,61,.6); }
.vmc-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--c-lime); color: var(--c-ink); display: grid; place-items: center; transition: transform .15s ease-out; }
.vmc-send:active { transform: scale(.92); }
.vmc-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vmc-note { margin: 0; padding: 0 12px 6px; font-size: 10px; color: var(--c-mute); text-align: center; }

@keyframes vmcPop { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes vmcIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes vmcDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Product page: sit above the sticky add-to-cart bar / floating video */
.page-product .vmchat { --c-b: calc(84px + var(--bottom-nav-h, 0px) + var(--safe-b, 0px)); }
@media (min-width: 1024px) { .page-product .vmchat { --c-b: 20px; } .page-product .vmc-launch b { display: none; } .page-product .vmc-launch { padding: 0 7px; } }

@media (max-width: 640px) {
  .vmchat { right: 12px; }
  .vmc-launch { padding: 0 7px; height: 50px; }
  .vmc-launch b { display: none; }
  .vmc-dot { left: 30px; }
  .vmc-teaser { width: 176px; bottom: 60px; padding: 8px; border-radius: 16px; }
  .vmc-tcard { aspect-ratio: 1 / 1; }
  .vmc-bubble { font-size: 11.5px; }
  .vmc-panel { position: fixed; right: 8px; left: 8px; bottom: calc(8px + var(--safe-b, 0px)); width: auto; height: min(78dvh, 620px); border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .vmchat * { animation: none !important; transition: none !important; } }